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/10/26 03:04:10 UTC
[incubator-devlake-website] branch main updated: Dora add (#288)
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
The following commit(s) were added to refs/heads/main by this push:
new dd9a50789 Dora add (#288)
dd9a50789 is described below
commit dd9a50789ed802f2bc159b5484ca7cf4decc0b30
Author: guyue66 <11...@users.noreply.github.com>
AuthorDate: Wed Oct 26 11:04:07 2022 +0800
Dora add (#288)
* feat: add the reference of tailwindConfig
* feat: tailwindConfig
Signed-off-by: yifu hu <yi...@merico.dev>
* feat: add some functions with dora publicity
Signed-off-by: yifu hu <yi...@merico.dev>
* feat: fulfill some unfinished requirements
Signed-off-by: yifu hu <yi...@merico.dev>
* fix: some adjustment
Signed-off-by: yifu hu <yi...@merico.dev>
* Update WhyDevlake.tsx
Signed-off-by: yifu hu <yi...@merico.dev>
Co-authored-by: Yumeng Wang <yu...@merico.dev>
---
src/components/Sections/Components.tsx | 13 ++---
src/components/Sections/HomepageHeader.tsx | 75 ++++++++++-------------------
src/components/Sections/JoinCommunity.tsx | 2 +-
src/components/Sections/UseCases.tsx | 8 +--
src/components/Sections/WhyDevlake.tsx | 27 ++++++-----
static/img/Homepage/NewWAD-2.png | Bin 0 -> 60107 bytes
static/img/Homepage/newUC3.png | Bin 11662 -> 79183 bytes
7 files changed, 53 insertions(+), 72 deletions(-)
diff --git a/src/components/Sections/Components.tsx b/src/components/Sections/Components.tsx
index 10c8076a5..fa0fdcc21 100644
--- a/src/components/Sections/Components.tsx
+++ b/src/components/Sections/Components.tsx
@@ -1,7 +1,7 @@
import React from "react";
import ArrowRight from "@site/static/img/Homepage/arrow-right.svg";
-export const TextTitle = ({ children }: { children: React.ReactNode }) =>
+export const TextTitle = ({ children, className }: { children: React.ReactNode, className?: string }) =>
<span className="block font-inter
text-heading2 text-primary-800 font-semibold mb-[16px]
sm:text-heading4 sm:mb-2 sm:mt-5">
@@ -16,22 +16,22 @@ export const H3Title = ({ children }: { children: React.ReactNode }) =>
</span>
export const TextDescription = ({ children }: { children: React.ReactNode }) =>
- <div className="font-inter pr-[20px] mobile:pr-[0]
+ <div className="font-inter
text-label18 text-neutral-500
sm:text-label16 sm:text-start">
{children}
</div>
export const TextLink = ({ link, children }: { link: string, children: React.ReactNode }) =>
- <a className="text-label16 text-secondary-500 flex items-center mt-[16px] mb-[8px]
- sm:justify-center hover:text-secondary-500"
+ <a className="absolute sm:static mobile:static text-label16 text-secondary-500 flex items-center mt-[16px] mb-[8px]
+ sm:justify-center hover:text-secondary-500 bottom-[10px]"
target="_blank"
href={link}>{children}
<ArrowRight width={20} height={20} />
</a>
export const TextSection = ({ children }: { children: React.ReactNode }) =>
- <div className={`text-start sm:text-center w-[448px] sm:w-auto`}>
+ <div className={`text-start sm:text-center w-[338px] sm:w-auto`}>
{children}
</div>
@@ -42,7 +42,8 @@ export const SvgImg = ({ svg: Svg }: { svg: React.ComponentType<React.SVGProps<S
<Svg role="img" />
</div>
export const SectionImg = ({ src }: { src: string }) => <img src={src} alt="" className="
- w-[384px] h-[288px]
+ w-[238px] h-[180px]
+ mb-[48px] sm:mb-[0] mobile:mb-[0]
sm:w-[240px] sm:h-[182px]
mobile:w-[200px] mobile:h-[150px]
" />
diff --git a/src/components/Sections/HomepageHeader.tsx b/src/components/Sections/HomepageHeader.tsx
index 01e855547..5ea6fb3ec 100644
--- a/src/components/Sections/HomepageHeader.tsx
+++ b/src/components/Sections/HomepageHeader.tsx
@@ -93,9 +93,10 @@ export function HomepageHeader() {
className="primary-button
flex
whitespace-nowrap
+ rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
bg-neutral-invert
text-primary-500
- border-2 border-primary-500
+ border-2 border-primary-500 border-solid
hover:text-primary-500
hover:bg-neutral-invert
hover:opacity-80
@@ -110,9 +111,10 @@ export function HomepageHeader() {
className="primary-button
flex
whitespace-nowrap
+ rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
bg-neutral-invert
text-primary-500
- border-2 border-primary-500
+ border-2 border-primary-500 border-solid
hover:text-primary-500
hover:bg-neutral-invert
hover:opacity-80
@@ -126,54 +128,27 @@ export function HomepageHeader() {
</div>
</div>
</header>
- {/* <header
- className="relative
- pl-[30px] pr-[30px]
- pt-[64px] pb-[90px]
- sm:pt-5 sm:pb-[0px]
- flex sm:flex-col
- justify-between items-center
- max-w-[80%] xl:max-w-[1440px] mx-auto sm:max-w-[90%]"
- >
- <div
- className=" z-10
- flex flex-col flex-nowrap
- justify-start w-[670px]
- sm:flex-wrap sm:w-auto
- sm:text-center mobile:justify-center
- "
- >
- <div
- className="text-primary
- font-bold font-inter
- text-heading0
- sm:text-heading2
- sm:font-semibold sm:text-center
- mb-[32px] sm:mb-3"
- >
- Debug Engineering Process <br className="sm:hidden mobile:block" />
- Demystify Dev Data
- </div>
- <div
- className="text-primary-800
- text-label24 font-inter font-normal mb-[48px]
- sm:text-label16 sm:text-start sm:mb-3
- "
- >
- Apache DevLake (Incubating) ingests, analyzes, and visualizes the
- fragmented data from DevOps tools to extract insights for
- engineering excellence, developer experience, and community growth.
- </div>
- <Link
- className="primary-button
- sm:flex sm:w-[137px] sm:h-5 p-[0px] sm:text-[14px]
- whitespace-nowrap sm:mx-auto sm:rounded-[5px] sm:mb-4"
- to="https://devlake.apache.org/docs/GettingStarted"
- >
- Get Started
- </Link>
- </div>
- </header> */}
+ <div className="
+ flex
+ text-heading4
+ text-neutral-300
+ font-inter
+ text-center
+ mx-[auto]
+ w-[86%]
+ h-[20px]
+ mb-[40px]
+ items-center
+ ">
+ <div className="h-[2px] bg-neutral-100 w-[46%] sm:w-[42%] mobile:w-[35%] relative"></div>
+ <span className="
+ flex-1
+ w-[81px]
+ ">
+ Trusted by
+ </span>
+ <div className="h-[2px] bg-neutral-100 w-[46%] sm:w-[42%] mobile:w-[35%]"></div>
+ </div>
<div
className="
pl-[30px] pr-[30px]
diff --git a/src/components/Sections/JoinCommunity.tsx b/src/components/Sections/JoinCommunity.tsx
index 38e964015..c6dfd72a7 100644
--- a/src/components/Sections/JoinCommunity.tsx
+++ b/src/components/Sections/JoinCommunity.tsx
@@ -7,7 +7,7 @@ import { InlineLink } from "./Components";
export function JoinCommunity() {
return (<div className="flex align-self-center justify-between xl:relative right-2
my-[72px] rounded-[20px] bg-primary-200 px-5 py-[36px] font-inter xl:mx-auto xl:w-[72vw] xl:max-w-[1300px]
- sm:w-[87vw] sm:my-6 sm:p-4 mobile:my-4 mobile:p-3">
+ sm:w-[87vw] sm:my-6 sm:p-4 mobile:my-4 mobile:p-3 mobile:mt-[80px] sm:mt-[180px]">
<div className="w-[600px] pr-3 sm:pr-[0] sm:w-auto">
<div className="text-heading1 mb-3 text-primary-800 font-semibold
sm:text-heading2">Join the Community</div>
diff --git a/src/components/Sections/UseCases.tsx b/src/components/Sections/UseCases.tsx
index 2958e003b..8edb0e961 100644
--- a/src/components/Sections/UseCases.tsx
+++ b/src/components/Sections/UseCases.tsx
@@ -17,13 +17,13 @@ function UCCard({ lead, title, desc, demoURL, children }: {
}) {
return (<div className='use-case-card relative shadow-card overflow-hidden
xl:w-[30vw] h-[496px] max-w-[650px] rounded-[16px]
- sm:w-[62vw] sm:h-[360px] sm:mx-auto
- mobile:w-auto mobile:h-[420px]'>
+ sm:w-[62vw] sm:h-[380px] sm:mx-auto
+ mobile:w-auto mobile:h-[auto]'>
<div className="flex items-center h-[232px] justify-center
sm:h-[182px]">
{children}
</div>
- <div className="bg-white px-4 py-2 h-[264px] sm:h-[152px] sm:p-2 mobile:h-[240px]">
+ <div className="bg-white px-4 py-2 h-[264px] sm:h-[195px] sm:p-2 mobile:h-[240px]">
<div className="font-inter text-neutral-300 text-label18 font-medium mb-2 pr-1
sm:text-label16 sm:font-normal sm:mb-[4px]">{lead}</div>
<div className="font-inter text-primary-800 text-heading2 font-semibold mb-2 pr-1
@@ -42,7 +42,7 @@ const UCIcon = ({ src }: { src: string }) => <img src={src} alt='' className="
export function UseCases() {
return (
- <div className="h-[1206px] sm:h-[1590px] mobile:h-[1752px]">
+ <div className="h-[1206px] sm:h-[1590px] mobile:h-[1768px]">
<img src={BG} alt='' className='absolute z-0 sm:hidden
xl:w-screen h-[1206px] left-[0px]' />
<img src={BGMB} alt='' className='absolute z-0 hidden
diff --git a/src/components/Sections/WhyDevlake.tsx b/src/components/Sections/WhyDevlake.tsx
index 10b2590e9..254c174df 100644
--- a/src/components/Sections/WhyDevlake.tsx
+++ b/src/components/Sections/WhyDevlake.tsx
@@ -1,7 +1,7 @@
import React from "react";
import * as C from "./Components";
import WAD1 from "@site/static/img/Homepage/WAD-1.png";
-import WAD2 from "@site/static/img/Homepage/WAD-2.png";
+import WAD2 from "@site/static/img/Homepage/NewWAD-2.png";
import WAD3 from "@site/static/img/Homepage/WAD-3.png";
import Sup1 from "@site/static/img/Homepage/sup-1-jira.png";
import Sup2 from "@site/static/img/Homepage/sup-2-tapd.svg";
@@ -16,8 +16,10 @@ import SupA from "@site/static/img/Homepage/sup-A-feishu.png";
function Feature({ className, children }: { className?: string, children: React.ReactNode }) {
return (
- <div className={`flex w-full justify-between items-center
- sm:flex-col ${className}`}>
+ <div className={`flex w-full sm:justify-between mobile:justify-between items-center
+ h-[488px] mobile:h-[auto] sm:h-[auto] relative
+ space-x-5
+ flex-col ${className}`}>
{children}
</div>
);
@@ -53,18 +55,21 @@ function Supports() {
}
export function WhyDevlake() {
- return (<section className="
- flex flex-col flex-nowrap items-stretch
- mt-[108px] sm:mt-[75px] mobile:mt-[44.9px]
- ">
+ return (
+ <section className="
+ flex flex-col flex-nowrap
+ py-5 items-stretch
+ mt-[80px] mobile:mt-[0px] sm:mt-[70px]
+ sm:py-[0px]">
<span
className="section-title text-center"
>
Why Apache DevLake
</span>
<div
- className=" flex flex-col
- mb-[72px] space-y-7
+ className="
+ flex flex-row mobile:flex-col sm:flex-col
+ mb-[72px]
sm:px-[0px] sm:space-y-[36px] sm:mb-[36px]
mobile:mb-4 mobile:space-y-4
">
@@ -79,7 +84,8 @@ export function WhyDevlake() {
</C.TextDescription>
</C.TextSection>
</Feature>
- <Feature className="sm:flex-col-reverse">
+ <Feature>
+ <C.SectionImg src={WAD2} />
<C.TextSection>
<C.TextTitle>Out-of-the-Box Analysis</C.TextTitle>
<C.TextDescription>
@@ -88,7 +94,6 @@ export function WhyDevlake() {
<C.TextLink link="https://devlake.apache.org/livedemo/EngineeringLeads/DORA">See Live Demo</C.TextLink>
</C.TextDescription>
</C.TextSection>
- <C.SectionImg src={WAD2} />
</Feature>
<Feature>
<C.SectionImg src={WAD3} />
diff --git a/static/img/Homepage/NewWAD-2.png b/static/img/Homepage/NewWAD-2.png
new file mode 100644
index 000000000..b0bd8dce3
Binary files /dev/null and b/static/img/Homepage/NewWAD-2.png differ
diff --git a/static/img/Homepage/newUC3.png b/static/img/Homepage/newUC3.png
index ab092755f..387031a52 100644
Binary files a/static/img/Homepage/newUC3.png and b/static/img/Homepage/newUC3.png differ