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 <[email protected]> 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',
