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/21 02:15:52 UTC
[incubator-devlake-website] branch main updated: Dora add (#283)
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 d0b8f929f Dora add (#283)
d0b8f929f is described below
commit d0b8f929f48eeac5376ad33200a95ab506d2b415
Author: guyue66 <11...@users.noreply.github.com>
AuthorDate: Fri Oct 21 10:15:47 2022 +0800
Dora add (#283)
* 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>
Signed-off-by: yifu hu <yi...@merico.dev>
---
package-lock.json | 10 ++
package.json | 1 +
src/components/Sections/HeaderLearnMore.tsx | 60 +++++++++
src/components/Sections/HomepageHeader.tsx | 186 ++++++++++++++++++++++------
src/components/Sections/UseCases.tsx | 20 +--
src/components/Sections/WhyDevlake.tsx | 6 +-
src/pages/index.js | 2 +
static/img/Homepage/newUC3.png | Bin 0 -> 11662 bytes
tailwind.config.js | 165 ++++++++++++------------
9 files changed, 320 insertions(+), 130 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 257a03a88..9a8c50ab6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
"@mdx-js/react": "^1.6.22",
"autoprefixer": "^10.4.8",
"clsx": "^1.1.1",
+ "dev-website-tailwind-config": "github:merico-dev/dev-website-tailwind-config",
"mdx-mermaid": "^1.3.2",
"mermaid": "^9.1.3",
"postcss": "^8.4.16",
@@ -5875,6 +5876,11 @@
"node": ">=0.8.0"
}
},
+ "node_modules/dev-website-tailwind-config": {
+ "version": "1.0.0",
+ "resolved": "git+ssh://git@github.com/merico-dev/dev-website-tailwind-config.git#62017898d43897acc108183cf8313e96e8083b25",
+ "license": "ISC"
+ },
"node_modules/didyoumean": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -18243,6 +18249,10 @@
"minimist": "^1.2.6"
}
},
+ "dev-website-tailwind-config": {
+ "version": "git+ssh://git@github.com/merico-dev/dev-website-tailwind-config.git#62017898d43897acc108183cf8313e96e8083b25",
+ "from": "dev-website-tailwind-config@https://github.com/merico-dev/dev-website-tailwind-config"
+ },
"didyoumean": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
diff --git a/package.json b/package.json
index 3380cfc2f..07d3d9aee 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
"@mdx-js/react": "^1.6.22",
"autoprefixer": "^10.4.8",
"clsx": "^1.1.1",
+ "dev-website-tailwind-config": "github:merico-dev/dev-website-tailwind-config",
"mdx-mermaid": "^1.3.2",
"mermaid": "^9.1.3",
"postcss": "^8.4.16",
diff --git a/src/components/Sections/HeaderLearnMore.tsx b/src/components/Sections/HeaderLearnMore.tsx
new file mode 100644
index 000000000..3539de94a
--- /dev/null
+++ b/src/components/Sections/HeaderLearnMore.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+
+import Link from "@docusaurus/Link";
+
+import IBMIcon from "@site/static/img/Homepage/brand/IBM.svg";
+export function HeaderLearnMore() {
+ return (
+ <header
+ className="sticky
+ top-[60px]
+ bg-[#3C5088]
+ z-30
+ "
+ >
+ <div
+ className="
+ flex
+ min-h-[56px]
+ items-center
+ justify-center
+ mobile:flex-wrap sm:flex-wrap
+ mobile:w-[342px] sm:w-[696px]
+ mx-auto
+ w-[100%]
+ "
+ >
+ <div
+ className="
+ text-center
+ font-medium
+ text-neutral-invert
+ text-label18 mobile:text-label14 sm:text-label14
+ mobile:my-1 sm:my-1
+ "
+ >
+ Apache DevLake now supports DORA metrics. Discover DORA with us!
+ </div>
+ <Link
+ className="
+ bg-[#7497F7]
+ primary-button
+ w-[100px]
+ sm:w-[81px] mobile:w-[81px]
+ h-[32px] sm:h-[24px] mobile:h-[24px]
+ rounded-[4px]
+ ml-[16px]
+ font-normal
+ text-label14
+ mobile:text-body-sm sm:text-body-sm
+ mobile:my-[8px] sm:my-[8px]
+ mobile:mx-auto sm:mx-auto
+ "
+ to="https://devlake.apache.org/docs/v0.14/UserManuals/DORA"
+ >
+ Learn More
+ </Link>
+ </div>
+ </header>
+ );
+}
diff --git a/src/components/Sections/HomepageHeader.tsx b/src/components/Sections/HomepageHeader.tsx
index a70ae22c8..9570e26ce 100644
--- a/src/components/Sections/HomepageHeader.tsx
+++ b/src/components/Sections/HomepageHeader.tsx
@@ -1,30 +1,132 @@
import React from "react";
-import Link from '@docusaurus/Link';
-import HeaderSvg from '@site/static/img/Homepage/HeaderIcon.svg';
-import HeaderBG from '@site/static/img/Homepage/HeaderBG.png';
-import HeaderBGMB from '@site/static/img/Homepage/HeaderBG-MB.png';
+import Link from "@docusaurus/Link";
+import HeaderSvg from "@site/static/img/Homepage/HeaderIcon.svg";
+import HeaderBG from "@site/static/img/Homepage/HeaderBG.png";
+import HeaderBGMB from "@site/static/img/Homepage/HeaderBG-MB.png";
-import RedHatIcon from '@site/static/img/Homepage/brand/RedHat.svg';
-import StripeIcon from '@site/static/img/Homepage/brand/Stripe.svg';
-import OrkesIcon from '@site/static/img/Homepage/brand/Orkes.png';
-import ClickHouseIcon from '@site/static/img/Homepage/brand/ClickHouse.png';
-import CrozIcon from '@site/static/img/Homepage/brand/Croz.png';
-import CoderIcon from '@site/static/img/Homepage/brand/Coder.png';
-import ScarfIcon from '@site/static/img/Homepage/brand/Scarf.svg';
-import IBMIcon from '@site/static/img/Homepage/brand/IBM.svg'
+import RedHatIcon from "@site/static/img/Homepage/brand/RedHat.svg";
+import StripeIcon from "@site/static/img/Homepage/brand/Stripe.svg";
+import OrkesIcon from "@site/static/img/Homepage/brand/Orkes.png";
+import ClickHouseIcon from "@site/static/img/Homepage/brand/ClickHouse.png";
+import CrozIcon from "@site/static/img/Homepage/brand/Croz.png";
+import CoderIcon from "@site/static/img/Homepage/brand/Coder.png";
+import ScarfIcon from "@site/static/img/Homepage/brand/Scarf.svg";
+import IBMIcon from "@site/static/img/Homepage/brand/IBM.svg";
export function HomepageHeader() {
return (
<div>
- <img src={HeaderBG} alt='' className="
+ <img
+ src={HeaderBG}
+ alt=""
+ className="
absolute top-[0px] left-[0px] max-h-[580px]
- xl:w-screen sm:hidden" />
- <img src={HeaderBGMB} alt='' className="
+ xl:w-screen sm:hidden"
+ />
+ <img
+ src={HeaderBGMB}
+ alt=""
+ className="
absolute top-[0px] left-[0px] w-screen z-0
sm:h-[496px] mobile:h-[526px]
- hidden sm:block" />
+ hidden sm:block"
+ />
<header
+ className="
+ flex justify-center
+ items-center
+ w-[840px] mobile:w-[90%] sm:w-[600px] 2xl:w-[1000px]
+ mobile:mt-[32px] sm:mt-[65px] mt-[71px]
+ z-10
+ mx-auto
+ "
+ >
+ <div
+ className="z-10
+ flex flex-col
+ flex-wrap
+ "
+ >
+ <div
+ className="text-primary
+ font-bold font-inter
+ text-label40 sm:text-heading2 mobile:text-label20
+ sm:font-semibold"
+ >
+ Debug Engineering Processes <br className="sm:hidden mobile:block" />Discover Opportunities with DORA Metrics
+ </div>
+ <div
+ className="
+ mt-5 mobile:mt-3 sm:mt-3
+ text-primary-800
+ text-label24
+ sm:text-label16Lake mobile:text-label16Lake
+ font-inter
+ "
+ >
+ Apache DevLake (Incubating) ingests, analyzes, and visualizes the
+ fragmented data from DevOps tools to distill insights for
+ engineering excellence.
+ </div>
+ <div className="
+ flex
+ mobile:flex-col
+ mt-[48px] sm:mt-3
+ items-center
+ justify-between
+ mb-[129px] 2xl:mb-[148px] sm:mb-[101px] mobile:mb-[44.9px]
+ ">
+ <Link
+ className="primary-button
+ flex
+ whitespace-nowrap
+ mobile:mt-3
+ rounded-[8px] sm:rounded-[5px] mobile:rounded-[5px]
+ w-[200px] sm:w-[140px] mobile:w-[140px]
+ h-[48px] sm:h-[32px] mobile:h-[32px]"
+ to="https://devlake.apache.org/livedemo/DORA"
+ >
+ See it Live
+ </Link>
+ <Link
+ className="primary-button
+ flex
+ whitespace-nowrap
+ bg-neutral-invert
+ text-primary-500
+ border-2 border-primary-500
+ hover:text-primary-500
+ hover:bg-neutral-invert
+ hover:opacity-80
+ mobile:mt-3
+ w-[200px] sm:w-[140px] mobile:w-[140px]
+ h-[48px] sm:h-[32px] mobile:h-[32px]"
+ to="https://devlake.apache.org/docs/GettingStarted"
+ >
+ Install DevLake
+ </Link>
+ <Link
+ className="primary-button
+ flex
+ whitespace-nowrap
+ bg-neutral-invert
+ text-primary-500
+ border-2 border-primary-500
+ hover:text-primary-500
+ hover:bg-neutral-invert
+ hover:opacity-80
+ mobile:mt-3
+ w-[200px] sm:w-[140px] mobile:w-[140px]
+ h-[48px] sm:h-[32px] mobile:h-[32px]"
+ to="https://join.slack.com/t/devlake-io/shared_invite/zt-17b6vuvps-x98pqseoUagM7EAmKC82xQ"
+ >
+ Join Slack
+ </Link>
+ </div>
+ </div>
+ </header>
+ {/* <header
className="relative
pl-[30px] pr-[30px]
pt-[64px] pb-[90px]
@@ -33,12 +135,14 @@ export function HomepageHeader() {
justify-between items-center
max-w-[80%] xl:max-w-[1440px] mx-auto sm:max-w-[90%]"
>
- <div className=" z-10
+ <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
@@ -47,15 +151,18 @@ export function HomepageHeader() {
sm:font-semibold sm:text-center
mb-[32px] sm:mb-3"
>
- Debug Engineering Process{' '}
- <br className="sm:hidden mobile:block" />
+ Debug Engineering Process <br className="sm:hidden mobile:block" />
Demystify Dev Data
</div>
- <div className="text-primary-800
+ <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.
+ "
+ >
+ 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
@@ -66,46 +173,43 @@ export function HomepageHeader() {
Get Started
</Link>
</div>
- <HeaderSvg className="
- w-auto h-auto z-10
- xl:relative xl:mr-8 xl:ml-2
- md:mr-0
- sm:w-[260px] sm:h-[228px] sm:mx-auto sm:mb-5
- "/>
- </header>
+ </header> */}
<div
className="
pl-[30px] pr-[30px]
- flex sm:flex-wrap
+ flex
+ sm:flex-wrap
xl:justify-between
sm:justify-around
- items-center"
+ items-center
+ m-auto
+ max-w-[90%]"
>
- <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px]">
+ <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<RedHatIcon className="mobile:w-[72px]" />
</div>
- <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px]">
+ <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<StripeIcon className="mobile:w-[36px]" />
</div>
- <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px]">
+ <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<img className="w-[88px] mobile:w-[48px]" src={OrkesIcon} />
</div>
- <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px]">
+ <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<img className="w-[140px] mobile:w-[71px]" src={ClickHouseIcon} />
</div>
- <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px]">
+ <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<img className="w-[80px] mobile:w-[36px]" src={CrozIcon} />
</div>
- <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px]">
+ <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<img className="w-[120px] mobile:w-[60px]" src={CoderIcon} />
</div>
- <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px]">
+ <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<ScarfIcon className="mobile:w-[48px]" />
</div>
- <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px]">
+ <div className="sm:flex-[0_0_25%] sm:text-center sm:mt-[14px] mobile:mt-[0px] z-20">
<IBMIcon className="mobile:w-[30px]" />
</div>
</div>
</div>
);
-}
\ No newline at end of file
+}
diff --git a/src/components/Sections/UseCases.tsx b/src/components/Sections/UseCases.tsx
index 612f5535e..d6ccccca1 100644
--- a/src/components/Sections/UseCases.tsx
+++ b/src/components/Sections/UseCases.tsx
@@ -4,7 +4,7 @@ import BG from '@site/static/img/Homepage/UCBG.png';
import BGMB from '@site/static/img/Homepage/UCBG-MB.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';
+import UC3 from '@site/static/img/Homepage/newUC3.png';
import UC4 from '@site/static/img/Homepage/UC4.png';
import * as C from "./Components";
@@ -30,7 +30,7 @@ function UCCard({ lead, title, desc, demoURL, children }: {
sm:text-[20px] sm:leading-[28px] sm:mb-[4px] sm:pr-[0]">{title}</div>
<div className="font-inter text-neutral-500 text-label18 font-normal pr-1
sm:text-label16 sm:pr-[0]">{desc}</div>
- <C.TextLink link={demoURL}>See it Live</C.TextLink>
+ <C.TextLink link={demoURL}>{lead === "Data Engineers" ? "Learn More" : "See it Live"}</C.TextLink>
</div>
</div>)
}
@@ -54,6 +54,14 @@ export function UseCases() {
sm:mt-[0] sm:text-heading2">Use Cases</span>
<div className="grid grid-cols-2 gap-x-[72px] xl:gap-x-10 gap-y-6
sm:grid-cols-1 sm:gap-y-4">
+ <UCCard
+ lead="Engineering Leads"
+ title="Implement DORA Fast"
+ desc="Implement DORA metrics in minutes to enable and manage delivery processes your developers and users will love."
+ demoURL="https://grafana-lake.demo.devlake.io/grafana/goto/qBPPBS44k?orgId=1"
+ >
+ <UCIcon src={UC3} />
+ </UCCard>
<UCCard
lead="Open Source Maintainers"
title="Fuel Community Growth with Analysis"
@@ -70,14 +78,6 @@ export function UseCases() {
>
<UCIcon src={UC2} />
</UCCard>
- <UCCard
- lead="Engineering Leads"
- title="Implement DORA Fast"
- desc="Implement DORA metrics in minutes to enable and manage delivery processes your developers and users will love."
- demoURL="https://grafana-lake.demo.devlake.io/grafana/goto/D5djPwIVk?orgId=1"
- >
- <UCIcon src={UC3} />
- </UCCard>
<UCCard
lead="Data Engineers"
title="The Foundation to Build What You Want"
diff --git a/src/components/Sections/WhyDevlake.tsx b/src/components/Sections/WhyDevlake.tsx
index 93d24bbfe..2f7f3816e 100644
--- a/src/components/Sections/WhyDevlake.tsx
+++ b/src/components/Sections/WhyDevlake.tsx
@@ -53,8 +53,10 @@ function Supports() {
}
export function WhyDevlake() {
- return (<section className="flex flex-col flex-nowrap py-5 items-stretch
- sm:py-[0px]">
+ return (<section className="
+ flex flex-col flex-nowrap items-stretch
+ mt-[108px] sm:mt-[75px] mobile:mt-[44.9px]
+ ">
<span
className="section-title text-center"
>
diff --git a/src/pages/index.js b/src/pages/index.js
index 503c53cce..ba8e56a85 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -8,6 +8,7 @@ import { UseCases } from '../components/Sections/UseCases';
import { UserFlow } from '../components/Sections/UserFlow';
import { JoinCommunity } from '../components/Sections/JoinCommunity';
import { Discover } from '../components/Sections/Discover';
+import { HeaderLearnMore } from '../components/Sections/HeaderLearnMore';
export default function Home() {
const { siteConfig } = useDocusaurusContext();
@@ -16,6 +17,7 @@ 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]'>
+ <HeaderLearnMore />
<div className=' mx-auto bg-white'>
<HomepageHeader />
<main className='max-w-[70%] xl:mx-auto
diff --git a/static/img/Homepage/newUC3.png b/static/img/Homepage/newUC3.png
new file mode 100644
index 000000000..ab092755f
Binary files /dev/null and b/static/img/Homepage/newUC3.png differ
diff --git a/tailwind.config.js b/tailwind.config.js
index 14b2ebaae..447589b84 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,79 +1,90 @@
/** @type {import('tailwindcss').Config} */
-const defaultTheme = require('tailwindcss/defaultTheme');
-module.exports = {
- content: ['./src/**/*.{js,jsx,ts,tsx}'],
- corePlugins: {
- preflight: false,
- },
- theme: {
- fontFamily: {
- inter: ['"Inter"', ...defaultTheme.fontFamily.sans],
- },
- screens: {
- 'xl': '1280px',
- 'sm': { 'max': '1024px' },
- 'mobile': { 'max': '550px' },
- },
- spacing: {
- 1: '8px',
- 2: '12px',
- 3: '16px',
- 4: '24px',
- 5: '32px',
- 6: '48px',
- 7: '64px',
- 8: '80px',
- 9: '96px',
- 10: '112px',
- 11: '128px',
- },
- extend: {
- colors: {
- primary: '#7497F7',
- 'primary-light': '#99B3F9',
- 'primary-100': '#F0F4FE',
- 'primary-200': '#DBE4FD',
- 'primary-300': '#BDCEFB',
- 'primary-500': '#7497F7',
- 'primary-800': '#3C5088',
- neutral: {
- invert: '#FFFFFF',
- 300: '#94959F',
- 400: '#70727F',
- 500: '#4D4E5F',
- 600: '#292B3F',
- },
- secondary: {
- 500: "#FF8B8B",
- }
- },
- fontSize: {
- heading0: ['48px', { lineHeight: '64px' }],
- heading1: ['32px', { lineHeight: '40px' }],
- heading2: ['24px', { lineHeight: '30px' }],
- heading3: ['20px', { lineHeight: '25px' }],
- heading4: ['16px', { lineHeight: '20px' }],
- label14: ['14px', { lineHeight: '20px' }],
- label16: ['16px', { lineHeight: '24px' }],
- label18: ['18px', { lineHeight: '24px' }],
- label24: ['24px', { lineHeight: '32px' }],
- body: ['14px', { lineHeight: 1.214 }],
- "body-sm": ['12px', { lineHeight: 1.25 },],
- "body-large": ['24px', { lineHeight: '32px' }],
- },
- dropShadow: {
- xl: ['0px 3.2px 16px rgba(153, 179, 249, 0.1)'],
- },
- boxShadow: {
- sm: '0px 2.4px 4.8px -0.8px rgba(0, 0, 0, 0.2), 0px 1.6px 8px rgba(0, 0, 0, 0.2)',
- lg: '0px 4.8px 9.6px -0.8px rgba(0, 0, 0, 0.2), 0px 3.2px 16px rgba(0, 0, 0, 0.2)',
- lower: '0px 1.2px 2.4px -0.8px rgba(0, 0, 0, 0.1), 0px 0.8px 4px rgba(0, 0, 0, 0.07)',
- high: '0px 9.6px 19.2px -0.8px rgba(0, 0, 0, 0.1), 0px 6.4px 32px rgba(0, 0, 0, 0.07)',
- card: '0px 20px 64px -0.8px rgba(0, 0, 0, 0.06)',
- hide: '0px 0px 0px 0px rgba(0, 0, 0, 0)',
- },
- },
- },
- plugins: [],
-};
+let {tailwindConfig} = require('dev-website-tailwind-config');
+tailwindConfig.theme.extend.fontSize = {
+ ...tailwindConfig.theme.extend.fontSize,
+ label40: ['40px', { lineHeight : '56px' }],
+ label20: ['20px', { lineHeight: '30px' }],
+ label16Lake: ['16px', { lineHeight: '22px' }]
+}
+module.exports = tailwindConfig;
+
+// pre config
+// const defaultTheme = require('tailwindcss/defaultTheme');
+
+// module.exports = {
+// content: ['./src/**/*.{js,jsx,ts,tsx}'],
+// corePlugins: {
+// preflight: false,
+// },
+// theme: {
+// fontFamily: {
+// inter: ['"Inter"', ...defaultTheme.fontFamily.sans],
+// },
+// screens: {
+// 'xl': '1280px',
+// 'sm': { 'max': '1024px' },
+// 'mobile': { 'max': '550px' },
+// },
+// spacing: {
+// 1: '8px',
+// 2: '12px',
+// 3: '16px',
+// 4: '24px',
+// 5: '32px',
+// 6: '48px',
+// 7: '64px',
+// 8: '80px',
+// 9: '96px',
+// 10: '112px',
+// 11: '128px',
+// },
+// extend: {
+// colors: {
+// primary: '#7497F7',
+// 'primary-light': '#99B3F9',
+// 'primary-100': '#F0F4FE',
+// 'primary-200': '#DBE4FD',
+// 'primary-300': '#BDCEFB',
+// 'primary-500': '#7497F7',
+// 'primary-800': '#3C5088',
+// neutral: {
+// invert: '#FFFFFF',
+// 300: '#94959F',
+// 400: '#70727F',
+// 500: '#4D4E5F',
+// 600: '#292B3F',
+// },
+// secondary: {
+// 500: "#FF8B8B",
+// }
+// },
+// fontSize: {
+// heading0: ['48px', { lineHeight: '64px' }],
+// heading1: ['32px', { lineHeight: '40px' }],
+// heading2: ['24px', { lineHeight: '30px' }],
+// heading3: ['20px', { lineHeight: '25px' }],
+// heading4: ['16px', { lineHeight: '20px' }],
+// label14: ['14px', { lineHeight: '20px' }],
+// label16: ['16px', { lineHeight: '24px' }],
+// label18: ['18px', { lineHeight: '24px' }],
+// label24: ['24px', { lineHeight: '32px' }],
+// body: ['14px', { lineHeight: 1.214 }],
+// "body-sm": ['12px', { lineHeight: 1.25 },],
+// "body-large": ['24px', { lineHeight: '32px' }],
+// },
+// dropShadow: {
+// xl: ['0px 3.2px 16px rgba(153, 179, 249, 0.1)'],
+// },
+// boxShadow: {
+// sm: '0px 2.4px 4.8px -0.8px rgba(0, 0, 0, 0.2), 0px 1.6px 8px rgba(0, 0, 0, 0.2)',
+// lg: '0px 4.8px 9.6px -0.8px rgba(0, 0, 0, 0.2), 0px 3.2px 16px rgba(0, 0, 0, 0.2)',
+// lower: '0px 1.2px 2.4px -0.8px rgba(0, 0, 0, 0.1), 0px 0.8px 4px rgba(0, 0, 0, 0.07)',
+// high: '0px 9.6px 19.2px -0.8px rgba(0, 0, 0, 0.1), 0px 6.4px 32px rgba(0, 0, 0, 0.07)',
+// card: '0px 20px 64px -0.8px rgba(0, 0, 0, 0.06)',
+// hide: '0px 0px 0px 0px rgba(0, 0, 0, 0)',
+// },
+// },
+// },
+// plugins: [],
+// };