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 932ad5585ea0e6fb031f5e848139c67ea8c533b8 Author: ZiyuTao <[email protected]> AuthorDate: Mon Sep 12 01:14:10 2022 +0800 feat: join community --- src/components/Sections/Components.tsx | 2 +- src/components/Sections/HomepageHeader.tsx | 2 +- src/components/Sections/JoinCommunity.tsx | 20 ++++++++++++++++++++ src/components/Sections/UseCases.tsx | 2 +- src/components/Sections/UserFlow.tsx | 2 +- src/components/Sections/WhyDevlake.tsx | 2 +- src/pages/index.js | 4 +++- static/img/Homepage/Join.png | Bin 0 -> 53783 bytes static/img/Homepage/discover.svg | 9 +++++++++ tailwind.config.js | 1 + 10 files changed, 38 insertions(+), 6 deletions(-) diff --git a/src/components/Sections/Components.tsx b/src/components/Sections/Components.tsx index 375a6ccf1..ab2689d03 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-primary-500 mt-[16px]" + <a className="text-primary-500" href={link}>{children} </a> diff --git a/src/components/Sections/HomepageHeader.tsx b/src/components/Sections/HomepageHeader.tsx index db34104be..ef77e7de3 100644 --- a/src/components/Sections/HomepageHeader.tsx +++ b/src/components/Sections/HomepageHeader.tsx @@ -9,7 +9,7 @@ export function HomepageHeader() { <header className="relative pt-[64px] pb-[90px] px-[80px] - flex bg-[white] + flex justify-between items-center" > <HeaderBgSvg className='absolute top-[0px] left-[0px]' /> diff --git a/src/components/Sections/JoinCommunity.tsx b/src/components/Sections/JoinCommunity.tsx new file mode 100644 index 000000000..40b91f004 --- /dev/null +++ b/src/components/Sections/JoinCommunity.tsx @@ -0,0 +1,20 @@ +import React from "react"; + +import Join from "@site/static/img/Homepage/Join.png"; + +import { InlineLink } from "./Components"; + +export function JoinCommunity() { + return (<div className="flex justify-between + my-[72px] mx-[140px] rounded-[20px] bg-primary-200 px-6 py-[36px] font-inter"> + <div className="w-[600px] pr-3"> + <div className="text-heading1 mb-3 text-primary-800 font-semibold">Join the Community</div> + <div className="text-label18 mb-4 text-neutral-500">Join our community to stay up to date on the latest news, ask and answer questions, make contributions, and connect with fellow community members!</div> + <div className="text-label16 space-y-[8px] flex flex-col"> + <InlineLink link="https://join.slack.com/t/devlake-io/shared_invite/zt-17b6vuvps-x98pqseoUagM7EAmKC82xQ";>Join Slack</InlineLink> + <InlineLink link="https://devlake.apache.org/community/subscribe";>Subscribe to Mailing List</InlineLink> + </div> + </div> + <img src={Join} alt='' className="w-[216px] h-[200px]" /> + </div>) +} \ No newline at end of file diff --git a/src/components/Sections/UseCases.tsx b/src/components/Sections/UseCases.tsx index c108d6f5d..659ae6af5 100644 --- a/src/components/Sections/UseCases.tsx +++ b/src/components/Sections/UseCases.tsx @@ -31,7 +31,7 @@ const UCIcon = ({ src }: { src: string }) => <img src={src} alt='' className=" " /> export function UseCases() { - return (<div className="flex flex-col relative bg-white items-center + return (<div className="flex flex-col relative items-center h-[1206px] "> <BG className='absolute z-0' /> <span diff --git a/src/components/Sections/UserFlow.tsx b/src/components/Sections/UserFlow.tsx index 98cd70cae..3393529ac 100644 --- a/src/components/Sections/UserFlow.tsx +++ b/src/components/Sections/UserFlow.tsx @@ -26,7 +26,7 @@ const Arrow = () => <div className="h-[140px] flex items-center"><BlueArrow /></ export function UserFlow() { return ( - <div className="flex flex-col relative bg-white items-center"> + <div className="flex flex-col relative items-center"> <span className="section-title text-center mt-[72px] mb-6" >User Flow</span> diff --git a/src/components/Sections/WhyDevlake.tsx b/src/components/Sections/WhyDevlake.tsx index 953e36c86..a5405660c 100644 --- a/src/components/Sections/WhyDevlake.tsx +++ b/src/components/Sections/WhyDevlake.tsx @@ -49,7 +49,7 @@ function Supports() { } export function WhyDevlake() { - return (<section className="bg-white flex flex-col flex-nowrap py-5 items-stretch"> + return (<section className="flex flex-col flex-nowrap py-5 items-stretch"> <span className="section-title text-center" > diff --git a/src/pages/index.js b/src/pages/index.js index f25940f13..94420e2f7 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -6,6 +6,7 @@ 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'; +import { JoinCommunity } from '../components/Sections/JoinCommunity'; export default function Home() { const { siteConfig } = useDocusaurusContext(); @@ -14,12 +15,13 @@ export default function Home() { title={`${siteConfig.title}`} description="Apache DevLake is an open-source dev data platform that ingests, analyzes, and visualizes the fragmented data from DevOps tools to distill insights for engineering productivity."> <div className='bg-[#f8f8f8]'> - <div className='max-w-[1280px] mx-auto'> + <div className='max-w-[1280px] mx-auto bg-white'> <HomepageHeader /> <main> <WhyDevlake /> <UseCases /> <UserFlow /> + <JoinCommunity /> </main> </div> </div> diff --git a/static/img/Homepage/Join.png b/static/img/Homepage/Join.png new file mode 100644 index 000000000..c8f64fcd4 Binary files /dev/null and b/static/img/Homepage/Join.png differ diff --git a/static/img/Homepage/discover.svg b/static/img/Homepage/discover.svg new file mode 100644 index 000000000..c64d615ac --- /dev/null +++ b/static/img/Homepage/discover.svg @@ -0,0 +1,9 @@ +<svg width="1280" height="469" viewBox="0 0 1280 469" fill="none" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";> +<rect y="0.791504" width="1280" height="468.095" fill="url(#pattern0)"/> +<defs> +<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1"> +<use xlink:href="#image0_998_3763" transform="translate(0 -0.558442) scale(0.000527704 0.001443)"/> +</pattern> +<image id="image0_998_3763" width="1920" height="1080" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAQ4CAYAAADo08FDAAAgAElEQVR4nOydeWBU1dn/P+femclMdkjCEnZMBAMaxSiiIlawltat1bqW0L60Vd+6Fqz2bf21li7wVurW1tqqLaF91VbrLlWgSlEoGtEICUJSVglLAmRPZrn3/P64d5LJZCZ7JmE8n1Yl9965ueHJOfecZ/k+YtfeSkk/IQRICSCt/wuB6K+bK3qBBCmQgl7bQdl0KNEP9sSyIdJESoEQkt7fTdF71NiML5Q94wdly/hC2TN+ULaML5Q94wdly/ii7/bUNEFSoodETwJOhwPdoaMJZdFYYxgGgYBJs9dLU1MLXp+/x/dQY3Mooeba+KHvtlQoFAqFoieIfgkAW/EkFUwa4vTIOsqmQ56 [...] +</defs> +</svg> diff --git a/tailwind.config.js b/tailwind.config.js index 41c225dff..cd66e41e2 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -28,6 +28,7 @@ module.exports = { primary: '#7497F7', 'primary-light': '#99B3F9', 'primary-100': '#F0F4FE', + 'primary-200': '#DBE4FD', 'primary-300': '#BDCEFB', 'primary-500': '#7497F7', 'primary-800': '#3C5088',
