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:26 UTC
[incubator-devlake-website] 14/14: feat: done
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 e7ba6a0f23282109e17d5bea53c163e3f8a82998
Author: ZiyuTao <zi...@merico.dev>
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