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/15 03:14:53 UTC
[incubator-devlake-website] 15/25: feat: adapt for wide screen
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 48816704a53caf2321063df809eac79a8df77121
Author: ZiyuTao <zi...@merico.dev>
AuthorDate: Wed Sep 14 15:36:03 2022 +0800
feat: adapt for wide screen
---
src/components/Sections/Components.tsx | 2 +-
src/components/Sections/HomepageHeader.tsx | 78 +++++++++++++++-------------
src/components/Sections/JoinCommunity.tsx | 2 +-
src/components/Sections/UseCases.tsx | 80 +++++++++++++++--------------
src/components/Sections/UserFlow.tsx | 3 +-
src/components/Sections/WhyDevlake.tsx | 2 +-
src/pages/index.js | 4 +-
static/img/Homepage/HeaderBG.png | Bin 0 -> 18773 bytes
static/img/Homepage/UCBG.png | Bin 0 -> 44135 bytes
tailwind.config.js | 2 +
10 files changed, 92 insertions(+), 81 deletions(-)
diff --git a/src/components/Sections/Components.tsx b/src/components/Sections/Components.tsx
index 1febcde41..eb658ce03 100644
--- a/src/components/Sections/Components.tsx
+++ b/src/components/Sections/Components.tsx
@@ -50,7 +50,7 @@ export const InlineLink = ({ link, children }: { link: string, children: React.R
</a>
export const BreakLine = () => <div className="
- h-[2px] bg-neutral-100 mx-[140px] mobile:hidden
+ h-[2px] bg-neutral-100 mobile:hidden
" />
export const Sup = ({ children, title }: { children: React.ReactNode, title: string }) =>
diff --git a/src/components/Sections/HomepageHeader.tsx b/src/components/Sections/HomepageHeader.tsx
index a24fc2c5f..8e2830b70 100644
--- a/src/components/Sections/HomepageHeader.tsx
+++ b/src/components/Sections/HomepageHeader.tsx
@@ -2,73 +2,77 @@ import React from "react";
import Link from '@docusaurus/Link';
import HeaderSvg from '@site/static/img/Homepage/HeaderIcon.svg';
-import HeaderBgSvg from '@site/static/img/Homepage/HeaderBgVec.svg';
+import HeaderBG from '@site/static/img/Homepage/HeaderBG.png';
export function HomepageHeader() {
return (
- <header
- className="relative
+ <div>
+ <img src={HeaderBG} alt='' className="
+ absolute top-[0px] left-[0px] max-h-[580px]
+ xl:w-screen
+ mobile:hidden" />
+ <header
+ className="relative
pt-[64px] pb-[90px] px-[80px]
mobile:pt-5 mobile:px-[32px] mobile:pb-[0px]
flex mobile:flex-col
justify-between items-center
+ max-w-[1320px] mx-auto
mobile:bg-primary-100"
- >
- <HeaderBgSvg className='
- absolute top-[0px] left-[0px]
- mobile:hidden' />
- <div className=" z-10
+ >
+ <div className=" z-10
flex flex-col flex-nowrap
justify-start w-[590px]
mobile:flex-wrap mobile:w-auto
mobile:text-center mobile:justify-center
" >
- <div className="hidden mobile:block
+ <div className="hidden mobile:block
text-primary text-center
font-bold font-inter
text-heading2
mb-[16px]">
- Apache DevLake (Incubating)
- </div>
- <div
- className="text-primary
+ Apache DevLake (Incubating)
+ </div>
+ <div
+ className="text-primary
font-bold font-inter
text-heading0
mobile:text-label16 mobile:leading-[20px]
mobile:font-normal mobile:text-center
mb-[32px] mobile:mb-3"
- >
- Debug Your Software{' '}
- <br className="mobile:hidden" />
- Engineering Process
- </div>
- <Link
- className="hidden primary-button mobile:flex w-[160px] h-5 p-[0px]
+ >
+ Debug Your Software{' '}
+ <br className="mobile:hidden" />
+ Engineering Process
+ </div>
+ <Link
+ className="hidden primary-button mobile:flex w-[160px] h-5 p-[0px]
whitespace-nowrap mx-auto rounded-[5px] mb-4"
- to="https://devlake.apache.org/docs/GettingStarted"
- >
- Getting Started
- </Link>
- <HeaderSvg className="hidden mobile:block
+ to="https://devlake.apache.org/docs/GettingStarted"
+ >
+ Getting Started
+ </Link>
+ <HeaderSvg className="hidden mobile:block
w-[240px] h-[240px] mx-auto mb-5" />
- <div className="text-primary-800
+ <div className="text-primary-800
text-label24 font-inter font-normal mb-[48px]
mobile:text-heading3 mobile:font-semibold
mobile:text-primary-500
">
- <span className="hidden mobile:inline">I</span>
- <span className="mobile:hidden">Apache DevLake (Incubating) i</span>ngests, analyzes, and visualizes the fragmented data from DevOps tools to distill insights for engineering excellence.
+ <span className="hidden mobile:inline">I</span>
+ <span className="mobile:hidden">Apache DevLake (Incubating) i</span>ngests, analyzes, and visualizes the fragmented data from DevOps tools to distill insights for engineering excellence.
+ </div>
+ <Link
+ className="primary-button mobile:hidden"
+ to="https://devlake.apache.org/docs/GettingStarted"
+ >
+ Getting Started
+ </Link>
</div>
- <Link
- className="primary-button mobile:hidden"
- to="https://devlake.apache.org/docs/GettingStarted"
- >
- Getting Started
- </Link>
- </div>
- <HeaderSvg className="
+ <HeaderSvg className="
w-auto h-auto z-10 mobile:hidden
"/>
- </header>
+ </header>
+ </div>
);
}
\ No newline at end of file
diff --git a/src/components/Sections/JoinCommunity.tsx b/src/components/Sections/JoinCommunity.tsx
index 54ea55280..adce60a73 100644
--- a/src/components/Sections/JoinCommunity.tsx
+++ b/src/components/Sections/JoinCommunity.tsx
@@ -6,7 +6,7 @@ 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
+ my-[72px] rounded-[20px] bg-primary-200 px-6 py-[36px] font-inter
mobile:mx-5 mobile:my-6 mobile:px-3 mobile:py-4">
<div className="w-[600px] pr-3
mobile:w-auto">
diff --git a/src/components/Sections/UseCases.tsx b/src/components/Sections/UseCases.tsx
index ce28c3b0f..7e1165a10 100644
--- a/src/components/Sections/UseCases.tsx
+++ b/src/components/Sections/UseCases.tsx
@@ -1,6 +1,6 @@
import React from "react";
-import BG from '@site/static/img/Homepage/UC-bg.svg';
+import BG from '@site/static/img/Homepage/UCBG.png';
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';
@@ -37,41 +37,45 @@ const UCIcon = ({ src }: { src: string }) => <img src={src} alt='' className="
" />
export function UseCases() {
- return (<div className="flex flex-col relative items-center
- h-[1206px] mobile:h-auto mobile:bg-primary-100 mobile:pb-6">
- <BG className='absolute z-0 mobile:hidden' />
- <span className="section-title text-center mt-7
- mobile:mt-[0]">Use Cases</span>
- <div className="grid grid-cols-2 gap-x-[72px] gap-y-6
- mobile:grid-cols-1">
- <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="Product Managers"
- title="Dev Workflow Improvement"
- desc="Align sprint planning with high-level goals and ensure the development progress is on track with metrics that help with improving the workflow."
- >
- <UCIcon src={UC2} />
- </UCCard>
- <UCCard
- lead="Tech Leads"
- title="Bring Out the Best in Your Team"
- desc="Gain insights into the development and delivery process. Remove blockers and risks to establish best practices."
- >
- <UCIcon src={UC3} />
- </UCCard>
- <UCCard
- lead="Data Engineers"
- title="The Foundation to Build What You Want"
- desc="Integrate user-defined data sources with DevLake and easily implement customized metrics and dashboards without reinventing the wheel."
- >
- <UCIcon src={UC4} />
- </UCCard>
- </div>
- </div>)
+ return (
+ <div className="h-[1206px]">
+ <img src={BG} alt='' className='absolute z-0 mobile:hidden
+ xl:w-screen h-[1206px] left-[0px]' />
+ <div className="flex flex-col relative items-center
+ mobile:h-auto mobile:bg-primary-100 mobile:pb-6">
+ <span className="section-title text-center mt-7
+ mobile:mt-[0]">Use Cases</span>
+ <div className="grid grid-cols-2 gap-x-[72px] gap-y-6
+ mobile:grid-cols-1">
+ <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="Product Managers"
+ title="Dev Workflow Improvement"
+ desc="Align sprint planning with high-level goals and ensure the development progress is on track with metrics that help with improving the workflow."
+ >
+ <UCIcon src={UC2} />
+ </UCCard>
+ <UCCard
+ lead="Tech Leads"
+ title="Bring Out the Best in Your Team"
+ desc="Gain insights into the development and delivery process. Remove blockers and risks to establish best practices."
+ >
+ <UCIcon src={UC3} />
+ </UCCard>
+ <UCCard
+ lead="Data Engineers"
+ title="The Foundation to Build What You Want"
+ desc="Integrate user-defined data sources with DevLake and easily implement customized metrics and dashboards without reinventing the wheel."
+ >
+ <UCIcon src={UC4} />
+ </UCCard>
+ </div>
+ </div>
+ </div>)
}
\ No newline at end of file
diff --git a/src/components/Sections/UserFlow.tsx b/src/components/Sections/UserFlow.tsx
index 409138c6b..660ac62bf 100644
--- a/src/components/Sections/UserFlow.tsx
+++ b/src/components/Sections/UserFlow.tsx
@@ -27,7 +27,8 @@ const Arrow = () => <div className="h-[140px] flex items-center mobile:hidden"><
export function UserFlow() {
return (
- <div className="flex flex-col relative items-center">
+ <div className="flex flex-col relative items-center
+ sm:hidden">
<span
className="section-title text-center mt-[72px] mb-6
mobile:m-[0]"
diff --git a/src/components/Sections/WhyDevlake.tsx b/src/components/Sections/WhyDevlake.tsx
index 4142c7922..76415e284 100644
--- a/src/components/Sections/WhyDevlake.tsx
+++ b/src/components/Sections/WhyDevlake.tsx
@@ -60,7 +60,7 @@ export function WhyDevlake() {
</span>
<div
className=" flex flex-col
- px-[140px] mb-[72px] space-y-7
+ mb-[72px] space-y-7
mobile:px-[0px] mobile:space-y-6 mobile:mb-6
">
<Feature>
diff --git a/src/pages/index.js b/src/pages/index.js
index b3a71d04e..8b2a31e4c 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -16,9 +16,9 @@ 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 bg-white'>
+ <div className=' mx-auto bg-white'>
<HomepageHeader />
- <main>
+ <main className='max-w-[1128px] xl:mx-auto mx-[140px]'>
<WhyDevlake />
<UseCases />
<UserFlow />
diff --git a/static/img/Homepage/HeaderBG.png b/static/img/Homepage/HeaderBG.png
new file mode 100644
index 000000000..4bc74de54
Binary files /dev/null and b/static/img/Homepage/HeaderBG.png differ
diff --git a/static/img/Homepage/UCBG.png b/static/img/Homepage/UCBG.png
new file mode 100644
index 000000000..04d70f404
Binary files /dev/null and b/static/img/Homepage/UCBG.png differ
diff --git a/tailwind.config.js b/tailwind.config.js
index d4ffb9be9..c0b5f29cc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,6 +12,8 @@ module.exports = {
},
screens: {
'mobile': { 'max': '375px' },
+ 'xl': '1280px',
+ 'sm': { 'max': '744px' },
},
spacing: {
1: '8px',