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 cee90cf7c37034fb566d5f1e754c0435b0763d21 Author: ZiyuTao <[email protected]> AuthorDate: Mon Sep 12 03:57:45 2022 +0800 feat: done --- src/components/Sections/Discover.tsx | 16 ++++++++++------ src/components/Sections/JoinCommunity.tsx | 10 ++++++---- src/components/Sections/UserFlow.tsx | 8 +++++--- 3 files changed, 21 insertions(+), 13 deletions(-) diff --git a/src/components/Sections/Discover.tsx b/src/components/Sections/Discover.tsx index f28598147..db2ee03b8 100644 --- a/src/components/Sections/Discover.tsx +++ b/src/components/Sections/Discover.tsx @@ -4,14 +4,18 @@ import Link from '@docusaurus/Link'; import BG from "@site/static/img/Homepage/discover.png"; export function Discover() { - return (<div className="flex flex-col items-center relative h-[324px] font-inter bg-primary-100"> + return (<div className="flex flex-col items-center relative h-[324px] font-inter bg-primary-100 + mobile:px-6 mobile:h-[260px]"> <img src={BG} alt='' className="absolute bottom-[0px] z-0" /> - <div className="font-medium text-primary-800 - text-[32px] leading-[48px] mt-[72px]">Discover more engineering insights with</div> - <div className="font-semibold text-primary-500 - text-[40px] leading-[60px] mt-1 mb-3">Apache DevLake (Incubating)</div> + <div className="font-medium text-primary-800 text-[32px] leading-[48px] mt-[72px] + mobile:mt-5 + mobile:text-center mobile:font-normal mobile:text-heading3 mobile:text-primary-500 + ">Discover more engineering insights with</div> + <div className="font-semibold text-primary-500 text-[40px] leading-[60px] mt-1 mb-3 + mobile:text-label24 mobile:leading-[30px] mobile:text-center">Apache DevLake (Incubating)</div> <Link - className="primary-button z-10" + className="primary-button z-10 mobile:flex mobile:w-[160px] mobile:h-5 mobile:p-[0px] + whitespace-nowrap mobile:mx-auto mobile:rounded-[5px] mobile:mb-4" to="https://devlake.apache.org/docs/GettingStarted"; > Getting Started diff --git a/src/components/Sections/JoinCommunity.tsx b/src/components/Sections/JoinCommunity.tsx index b95807887..54ea55280 100644 --- a/src/components/Sections/JoinCommunity.tsx +++ b/src/components/Sections/JoinCommunity.tsx @@ -7,16 +7,18 @@ import { InlineLink } from "./Components"; export function JoinCommunity() { return (<div className="flex justify-between mobile:flex-col-reverse my-[72px] mx-[140px] rounded-[20px] bg-primary-200 px-6 py-[36px] font-inter - mobile:m-[0px] mobile:rounded-none mobile:p-[0px]"> + mobile:mx-5 mobile:my-6 mobile:px-3 mobile:py-4"> <div className="w-[600px] pr-3 mobile:w-auto"> - <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-heading1 mb-3 text-primary-800 font-semibold + mobile:text-heading2 mobile:text-primary-500">Join the Community</div> + <div className="text-label18 mb-4 text-neutral-500 + mobile:text-label14 mobile:mb-3">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]" /> + <img src={Join} alt='' className="w-[216px] h-[200px] mobile:mx-auto mobile:mb-4" /> </div>) } \ No newline at end of file diff --git a/src/components/Sections/UserFlow.tsx b/src/components/Sections/UserFlow.tsx index a58dce0a8..409138c6b 100644 --- a/src/components/Sections/UserFlow.tsx +++ b/src/components/Sections/UserFlow.tsx @@ -11,7 +11,7 @@ const Card = ({ icon, text, children }: { icon: React.ReactNode, text: String, children: React.ReactNode, -}) => (<div className="w-[220px]"> +}) => (<div className="w-[220px] mobile:mb-6 mobile:text-center"> <div className="flex flex-col items-center bg-primary-100 w-[220px] h-[140px] rounded-[6px] border-primary-500 border-[1px] border-solid @@ -19,7 +19,8 @@ const Card = ({ icon, text, children }: { <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 className="mt-5 text-label18 font-inter pr-3 + mobile:text-label14 mobile:mt-3">{children}</div> </div>) const Arrow = () => <div className="h-[140px] flex items-center mobile:hidden"><BlueArrow /></div> @@ -28,7 +29,8 @@ export function UserFlow() { return ( <div className="flex flex-col relative items-center"> <span - className="section-title text-center mt-[72px] mb-6" + className="section-title text-center mt-[72px] mb-6 + mobile:m-[0]" >User Flow</span> <div className="flex mb-[72px] mobile:flex-col"> <Card
