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:13 UTC
[incubator-devlake-website] 01/14: feat: overhaul and section head
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 75314b56aa2e1306e7dad98fad1b59b49f3ab273
Author: ZiyuTao <zi...@merico.dev>
AuthorDate: Sun Sep 11 17:32:31 2022 +0800
feat: overhaul and section head
new vi
---
docusaurus.config.js | 20 ++++-
package.json | 6 +-
src/components/Sections/HomepageHeader.tsx | 51 ++++++++++++
src/css/custom.css | 35 ++++++--
src/pages/index.js | 29 +++----
static/img/Homepage/HeaderBgVec.svg | 3 +
static/img/Homepage/HeaderIcon.svg | 124 +++++++++++++++++++++++++++++
tailwind.config.js | 70 ++++++++++++++++
8 files changed, 308 insertions(+), 30 deletions(-)
diff --git a/docusaurus.config.js b/docusaurus.config.js
index f6d3a841a..ff48d2dea 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -31,7 +31,7 @@ const versions = require('./versions.json');
// set to undefined to remove Edit this Page
editUrl: 'https://github.com/apache/incubator-devlake-website/edit/main',
remarkPlugins: [math, [require('mdx-mermaid'), {
- theme: {light: 'neutral', dark: 'forest'}
+ theme: { light: 'neutral', dark: 'forest' }
}]],
rehypePlugins: [katex],
versions: {
@@ -47,12 +47,12 @@ const versions = require('./versions.json');
},
blog: {
showReadingTime: true,
- readingTime: ({content, frontMatter, defaultReadingTime}) =>
- defaultReadingTime({content, options: {wordsPerMinute: 300}}),
+ readingTime: ({ content, frontMatter, defaultReadingTime }) =>
+ defaultReadingTime({ content, options: { wordsPerMinute: 300 } }),
// Please change this to your repo.
editUrl: 'https://github.com/apache/incubator-devlake-website/edit/main',
remarkPlugins: [math, [require('mdx-mermaid'), {
- theme: {light: 'neutral', dark: 'forest'}
+ theme: { light: 'neutral', dark: 'forest' }
}]],
rehypePlugins: [katex],
blogSidebarTitle: 'All posts',
@@ -75,6 +75,18 @@ const versions = require('./versions.json');
sidebarPath: require.resolve('./sidebarsCommunity.js'),
},
],
+ function tailwindcss() {
+ return {
+ name: 'docusaurus-tailwindcss',
+ configurePostCss(postcssOptions) {
+ // Appends TailwindCSS and AutoPrefixer.
+ postcssOptions.plugins.push(require('tailwindcss'));
+ postcssOptions.plugins.push(require('autoprefixer'));
+ postcssOptions.plugins.push(require('postcss-gap-properties'));
+ return postcssOptions;
+ },
+ };
+ },
],
i18n: {
defaultLocale: 'en',
diff --git a/package.json b/package.json
index c9a31e810..68090a073 100644
--- a/package.json
+++ b/package.json
@@ -18,14 +18,18 @@
"@docusaurus/plugin-content-docs": "^2.0.0-rc.1",
"@docusaurus/preset-classic": "^2.0.0-rc.1",
"@mdx-js/react": "^1.6.22",
+ "autoprefixer": "^10.4.8",
"clsx": "^1.1.1",
"mdx-mermaid": "^1.2.3",
"mermaid": "^9.1.3",
+ "postcss": "^8.4.16",
+ "postcss-gap-properties": "^3.0.5",
"prism-react-renderer": "^1.3.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"rehype-katex": "5",
- "remark-math": "3"
+ "remark-math": "3",
+ "tailwindcss": "^3.1.8"
},
"browserslist": {
"production": [
diff --git a/src/components/Sections/HomepageHeader.tsx b/src/components/Sections/HomepageHeader.tsx
new file mode 100644
index 000000000..3bd9628e6
--- /dev/null
+++ b/src/components/Sections/HomepageHeader.tsx
@@ -0,0 +1,51 @@
+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';
+
+export function HomepageHeader() {
+ return (
+ <header
+ className="relative
+ pt-[64px] pb-[90px] px-[80px]
+ flex
+ justify-between items-center"
+ >
+ <HeaderBgSvg className='absolute z-[-1] top-[0px] left-[0px]' />
+ <div
+ className="
+ flex flex-col flex-nowrap
+ justify-start w-[590px]
+ "
+ >
+ <div
+ className="text-primary
+ font-bold font-inter
+ text-heading0
+ mb-[32px]"
+ >
+ Debug Your Software
+ <br />
+ Engineering Process
+ </div>
+ <div
+ className="text-primary-800
+ text-label24 font-inter font-normal
+ mb-[48px]
+ "
+ >
+ Apache DevLake (Incubating) ingests, analyzes, and visualizes the fragmented data from DevOps tools to distill insights for engineering excellence.
+ </div>
+ <Link
+ className="primary-button"
+ to="https://devlake.apache.org/docs/GettingStarted"
+ >
+ Getting Started
+ </Link>
+ </div>
+ <HeaderSvg className="w-auto h-auto"
+ />
+ </header>
+ );
+}
\ No newline at end of file
diff --git a/src/css/custom.css b/src/css/custom.css
index f164a8bf4..1f07be1e2 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -5,6 +5,14 @@
*/
/* You can override the default Infima variables here. */
+
+/**
+ * Enable tailwindcss, preflight styles from tailwind are removed to avoid conflicts.
+ */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
:root {
--ifm-color-primary: #7497f7;
--ifm-color-primary-dark: #5d7cd2;
@@ -27,10 +35,27 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.3);
}
-html[data-theme='light'] .footer--dark {
- background-color: #292B3F;
-}
+@layer components {
+ .primary-button {
+ @apply bg-primary-500 hover:bg-primary-light;
+ @apply flex items-center justify-center w-[160px] h-[48px];
+ @apply hover:no-underline hover:text-neutral-invert;
+ @apply text-neutral-invert text-[16px] leading-[20px] font-semibold;
+ @apply rounded-[4.9px] lg:rounded-[10px];
+ @apply shadow-sm shadow-primary/20 lg:shadow-lg lg:shadow-primary/20;
+ }
+
+ .section-title {
+ @apply text-heading2 mb-5;
+ @apply text-neutral-600 font-semibold;
+ @apply lg:text-[40px] lg:leading-[1.2] lg:mb-6;
+ }
+
+ .floating-link-icon {
+ transition: transform 0.2s ease-in-out;
+ }
-html[data-theme='light'] .docusaurus-mt-lg {
- background-color: white;
+ .floating-link:hover .floating-link-icon {
+ @apply transform translate-x-1;
+ }
}
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index 51e6cb588..53b33183c 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,33 +1,22 @@
import React from 'react';
-import clsx from 'clsx';
import Layout from '@theme/Layout';
-import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import styles from './index.module.css';
-import HomepageFeatures from '../components/HomepageFeatures';
-
-function HomepageHeader() {
- const {siteConfig} = useDocusaurusContext();
- return (
- <header className={clsx('hero hero--primary', styles.heroBanner)}>
- <div className="container">
- <h1 className="hero__title">{siteConfig.title}</h1>
- <p className="hero__subtitle">{siteConfig.tagline}</p>
- </div>
- </header>
- );
-}
+import { HomepageHeader } from '@site/src/components/Sections/HomepageHeader';
+import { WhyDevlake } from '../components/Sections/WhyDevlake';
export default function Home() {
- const {siteConfig} = useDocusaurusContext();
+ const { siteConfig } = useDocusaurusContext();
return (
<Layout
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.">
- <HomepageHeader />
- <main>
- <HomepageFeatures />
- </main>
+ <div className='max-w-[1280px] mx-auto'>
+ <HomepageHeader />
+ <main>
+ <WhyDevlake />
+ </main>
+ </div>
</Layout>
);
}
diff --git a/static/img/Homepage/HeaderBgVec.svg b/static/img/Homepage/HeaderBgVec.svg
new file mode 100644
index 000000000..fb98460c6
--- /dev/null
+++ b/static/img/Homepage/HeaderBgVec.svg
@@ -0,0 +1,3 @@
+<svg width="1280" height="538" viewBox="0 0 1280 538" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M635.5 423.5C399.865 549.016 95.669 542.018 0 532.18V6.86646e-05L1280 0V321C1027 321 892 286.87 635.5 423.5Z" fill="#F3F7FF"/>
+</svg>
diff --git a/static/img/Homepage/HeaderIcon.svg b/static/img/Homepage/HeaderIcon.svg
new file mode 100644
index 000000000..22787a407
--- /dev/null
+++ b/static/img/Homepage/HeaderIcon.svg
@@ -0,0 +1,124 @@
+<svg width="440" height="385" viewBox="0 0 440 385" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_998_3388)">
+<path opacity="0.18" d="M161.548 13.0931C107.656 32.8861 62.3606 74.7585 45.9906 124.352C41.2873 138.619 38.7658 153.329 33.3179 167.465C27.2558 183.143 17.6402 197.789 10.9903 213.322C-9.16849 260.029 0.943584 313.385 32.8998 351.076C56.978 379.466 92.5793 390.806 133.184 381.125C153.186 376.37 170.406 365.709 189.794 360.13C216.537 352.435 246.756 353.167 274.074 352.461C304.593 351.664 368.545 340.703 399.168 338.09C446.123 334.066 443.875 236.63 433.581 212.068C423.286 187.507 407.24 [...]
+<path d="M218.457 345.994C326.011 345.994 413.2 337.185 413.2 326.319C413.2 315.452 326.011 306.643 218.457 306.643C110.904 306.643 23.7153 315.452 23.7153 326.319C23.7153 337.185 110.904 345.994 218.457 345.994Z" fill="url(#paint0_linear_998_3388)"/>
+<path d="M271.513 256.227H197.724L184.306 199.082H258.096L271.513 256.227Z" fill="#7497F7"/>
+<path d="M267.15 256.227H197.724L184.306 199.082H253.732L267.15 256.227Z" fill="url(#paint1_linear_998_3388)"/>
+<path d="M369.263 254.15H106.114V324.255H369.263V254.15Z" fill="#7497F7"/>
+<path d="M369.263 254.15H106.114V324.255H369.263V254.15Z" fill="url(#paint2_linear_998_3388)"/>
+<path d="M325.862 51.0459H111.066C98.3883 51.0459 88.1111 61.323 88.1111 74.0005V194.117C88.1111 206.795 98.3883 217.072 111.066 217.072H325.862C338.54 217.072 348.817 206.795 348.817 194.117V74.0005C348.817 61.323 338.54 51.0459 325.862 51.0459Z" fill="#7497F7"/>
+<path d="M348.817 184.136V194.104C348.81 200.19 346.389 206.025 342.086 210.328C337.783 214.631 331.948 217.052 325.862 217.059H111.053C104.965 217.059 99.1262 214.641 94.8213 210.336C90.5165 206.031 88.0981 200.192 88.0981 194.104V184.136H348.817Z" fill="url(#paint3_linear_998_3388)"/>
+<path opacity="0.1" d="M318.259 163.598V228.216H262.329C260.78 228.216 259.294 227.601 258.199 226.506C257.104 225.41 256.489 223.925 256.489 222.376V169.438C256.489 167.889 257.104 166.404 258.199 165.309C259.294 164.213 260.78 163.598 262.329 163.598H318.259Z" fill="#020202"/>
+<path d="M173.502 218.535H215.191C215.548 218.535 215.902 218.605 216.231 218.742C216.561 218.879 216.86 219.079 217.113 219.331C217.365 219.583 217.565 219.883 217.702 220.213C217.838 220.542 217.909 220.896 217.909 221.253C217.909 221.609 217.838 221.963 217.702 222.293C217.565 222.622 217.365 222.922 217.113 223.174C216.86 223.426 216.561 223.627 216.231 223.763C215.902 223.9 215.548 223.97 215.191 223.97H173.502C173.145 223.97 172.792 223.9 172.462 223.763C172.132 223.627 171.833 223 [...]
+<path d="M180.243 203.994L179.002 212.186L182.438 212.578L186.188 203.916L180.243 203.994Z" fill="#FCBDBA"/>
+<path d="M183.47 211.376C183.303 211.242 183.158 211.083 183.039 210.905C182.864 211.015 182.666 211.085 182.461 211.11C182.255 211.134 182.047 211.114 181.85 211.049L180.126 210.762C179.823 210.725 179.527 210.642 179.25 210.513H179.133L178.767 211.219C178.141 212.479 177.773 213.852 177.683 215.256C180.946 216.029 184.3 216.35 187.651 216.21C187.919 216.247 188.192 216.211 188.442 216.108C188.693 216.005 188.911 215.837 189.075 215.622C189.139 215.476 189.173 215.318 189.173 215.158C18 [...]
+<path d="M203.289 206.49L202.218 214.707L205.667 215.021L209.234 206.294L203.289 206.49Z" fill="#FCBDBA"/>
+<path opacity="0.1" d="M320.44 92.0038V117.362C320.44 120.696 319.116 123.892 316.759 126.249C314.402 128.606 311.205 129.931 307.872 129.931H234.279L204.452 164.238V79.4355H307.872C309.523 79.4355 311.157 79.7606 312.682 80.3922C314.207 81.0239 315.592 81.9496 316.759 83.1167C317.926 84.2838 318.852 85.6693 319.484 87.1941C320.115 88.719 320.44 90.3533 320.44 92.0038Z" fill="#020202"/>
+<path d="M304.841 68.644H221.619C214.678 68.644 209.051 74.271 209.051 81.2123V106.571C209.051 113.512 214.678 119.139 221.619 119.139H304.841C311.782 119.139 317.409 113.512 317.409 106.571V81.2123C317.409 74.271 311.782 68.644 304.841 68.644Z" fill="white"/>
+<path d="M302.146 81.7661H277.054V85.9481H302.146V81.7661Z" fill="#E9EEFE"/>
+<path d="M302.146 92.2209H277.054V96.4029H302.146V92.2209Z" fill="#E9EEFE"/>
+<path d="M295.873 102.676H277.054V106.858H295.873V102.676Z" fill="#E9EEFE"/>
+<path d="M233.144 96.4028H225.825V109.994H233.144V96.4028Z" fill="#7497F7"/>
+<path d="M267.645 93.2664H260.326V109.994H267.645V93.2664Z" fill="#7497F7"/>
+<path d="M244.644 85.948H237.326V109.994H244.644V85.948Z" fill="#7497F7"/>
+<path d="M256.144 77.584H248.826V109.994H256.144V77.584Z" fill="#FF8B8B"/>
+<path opacity="0.1" d="M223.657 112.881C223.235 112.919 222.81 112.856 222.416 112.698C221.78 112.255 221.343 111.579 221.201 110.817C219.15 104.481 214.904 98.3141 208.528 96.4458C206.869 103.2 206.987 110.255 207.117 117.219C207.117 119.074 207.326 121.203 208.816 122.301C209.787 122.9 210.916 123.191 212.056 123.137C219.286 123.412 226.47 121.88 232.959 118.682C234.906 117.715 238.917 113.939 235.18 112.711C234.057 112.332 231.574 112.907 230.372 112.907L223.657 112.881Z" fill="#020202"/>
+<path d="M179.943 146.98L185.064 175.448L179.943 206.072L188.239 206.712L200.324 172.221L196.234 144.89L179.943 146.98Z" fill="#473F47"/>
+<path d="M208.581 144.89L217.791 182.79L210.344 208.88L202.963 208.502L203.995 186.239L190.996 150.246L208.581 144.89Z" fill="#473F47"/>
+<path d="M233.939 113.456C235.047 112.809 236.232 112.304 237.467 111.954C237.66 111.867 237.872 111.829 238.084 111.843C238.295 111.856 238.501 111.921 238.682 112.032C238.873 112.211 238.998 112.451 239.034 112.711C239.226 113.548 239.157 114.423 238.838 115.22C240.23 115.991 241.691 116.629 243.202 117.127C243.517 117.181 243.818 117.299 244.086 117.475C244.353 117.65 244.582 117.879 244.757 118.146C244.85 118.426 244.858 118.727 244.779 119.011C244.7 119.295 244.537 119.549 244.312 1 [...]
+<path d="M205.471 78.4819C206.332 80.2106 206.885 82.0763 207.104 83.9951C207.205 84.9532 207.055 85.921 206.668 86.8031C206.28 87.6851 205.67 88.451 204.896 89.025C204.425 89.2429 203.985 89.5242 203.59 89.8612C202.205 91.2852 203.786 93.859 202.989 95.7011C202.682 96.3075 202.159 96.7775 201.524 97.0191C200.888 97.2608 200.185 97.2566 199.553 97.0076C198.92 96.7308 198.357 96.3162 197.905 95.7941C197.453 95.272 197.123 94.6555 196.94 93.9896C196.588 92.6518 196.429 91.2702 196.47 89.88 [...]
+<path d="M234.078 119.735C234.078 119.735 218.296 133.832 217.159 133.832C216.023 133.832 209.007 124.974 209.007 124.974L208.471 145.093C206.523 146.243 204.492 147.247 202.396 148.098C198.788 149.746 194.852 150.55 190.886 150.45C183.217 149.757 179.834 147.184 179.834 147.184L184.563 99.9288C184.563 99.9288 193.499 93.5009 196.556 94.4808C198.742 94.8726 200.981 94.8726 203.167 94.4808C207.583 93.8929 212.09 99.9288 212.09 99.9288L217.956 119.199L231.713 114.313C232.609 114.872 233.31 [...]
+<path d="M207.209 69.6109C207.31 68.5731 207.067 67.5307 206.516 66.6452C205.458 65.1689 203.289 65.0382 201.513 65.4302C200.291 65.7652 199.108 66.2294 197.985 66.815C197.159 67.1554 196.258 67.2725 195.372 67.1547C193.027 67.1131 190.753 67.9628 189.01 69.5325C186.606 71.8057 186.044 75.1634 185.796 78.3119C185.534 81.8786 187.102 84.8443 189.467 87.5617C191.466 89.9264 195.111 92.252 197.711 89.2601C198.87 87.7394 199.399 85.8303 199.187 83.9298C198.564 83.8661 197.977 83.6087 197.509 [...]
+<path d="M176.193 67.8602C174.532 67.6631 172.85 67.9777 171.372 68.7622C169.894 69.5466 168.691 70.7634 167.923 72.25C166.107 75.9734 167.414 80.3762 167.714 84.5177C167.987 85.9553 167.763 87.443 167.08 88.7367C166.396 90.0304 165.293 91.0535 163.952 91.638C161.025 93.4017 157.654 94.5906 155.316 97.086C153.474 99.1371 152.387 101.755 152.233 104.507C152.087 105.654 152.287 106.819 152.807 107.851C153.318 108.615 153.986 109.261 154.767 109.746C156.932 111.311 159.388 112.428 161.99 11 [...]
+<path d="M185.966 73.1907H185.848C184.412 73.1907 183.248 74.3547 183.248 75.7905V75.9081C183.248 77.344 184.412 78.508 185.848 78.508H185.966C187.401 78.508 188.565 77.344 188.565 75.9081V75.7905C188.565 74.3547 187.401 73.1907 185.966 73.1907Z" fill="#BDCEFB"/>
+<path d="M206.66 213.806C206.496 213.669 206.351 213.511 206.229 213.336C206.056 213.451 205.86 213.527 205.655 213.559C205.449 213.59 205.24 213.577 205.04 213.518L203.316 213.257C203.009 213.224 202.71 213.144 202.427 213.022H202.31L201.957 213.741C201.367 215.018 201.03 216.398 200.964 217.804C204.242 218.499 207.599 218.754 210.945 218.561C211.215 218.594 211.489 218.553 211.738 218.443C211.986 218.333 212.2 218.157 212.356 217.934C212.421 217.788 212.454 217.63 212.454 217.47C212.45 [...]
+<path d="M207.392 223.97H202.1L197.881 235.389H176.076L180.296 223.97H175.004L137.888 324.255H143.179L146.85 314.339H168.616L164.945 324.255H170.236L173.907 314.339H174.064V313.92L207.078 224.741V324.255H212.369V223.97H207.392ZM196.443 239.282L190.943 254.149H169.125L174.625 239.282H196.443ZM162.175 272.976L167.675 258.121H189.519L183.993 272.976H162.175ZM182.556 276.895L177.055 291.75H155.237L160.777 276.817L182.556 276.895ZM148.287 310.524L153.787 295.656H175.605L170.105 310.524H148.28 [...]
+<path d="M341.88 156.648H262.329C259.103 156.648 256.489 159.262 256.489 162.488V215.413C256.489 218.638 259.103 221.253 262.329 221.253H341.88C345.105 221.253 347.719 218.638 347.719 215.413V162.488C347.719 159.262 345.105 156.648 341.88 156.648Z" fill="white"/>
+<path d="M333.766 212.329H270.442V165.584H271.578V211.18H333.766V212.329Z" fill="#7497F7"/>
+<path d="M271.187 195.528L270.586 194.549L286.551 184.737L310.028 188.356L330.775 176.389L331.349 177.382L310.25 189.558L310.054 189.519L286.799 185.939L271.187 195.528Z" fill="#7497F7"/>
+<path d="M287.387 187.951C288.772 187.951 289.895 186.828 289.895 185.442C289.895 184.057 288.772 182.934 287.387 182.934C286.001 182.934 284.878 184.057 284.878 185.442C284.878 186.828 286.001 187.951 287.387 187.951Z" fill="#7497F7"/>
+<path d="M310.132 191.465C311.518 191.465 312.641 190.342 312.641 188.957C312.641 187.571 311.518 186.448 310.132 186.448C308.747 186.448 307.624 187.571 307.624 188.957C307.624 190.342 308.747 191.465 310.132 191.465Z" fill="#7497F7"/>
+<path d="M330.631 179.772C332.016 179.772 333.139 178.649 333.139 177.264C333.139 175.878 332.016 174.755 330.631 174.755C329.245 174.755 328.122 175.878 328.122 177.264C328.122 178.649 329.245 179.772 330.631 179.772Z" fill="#7497F7"/>
+<path opacity="0.28" d="M287.387 187.951C288.772 187.951 289.895 186.828 289.895 185.442C289.895 184.057 288.772 182.934 287.387 182.934C286.001 182.934 284.878 184.057 284.878 185.442C284.878 186.828 286.001 187.951 287.387 187.951Z" fill="#020202"/>
+<path opacity="0.28" d="M310.132 191.465C311.518 191.465 312.641 190.342 312.641 188.957C312.641 187.571 311.518 186.448 310.132 186.448C308.747 186.448 307.624 187.571 307.624 188.957C307.624 190.342 308.747 191.465 310.132 191.465Z" fill="#020202"/>
+<path opacity="0.28" d="M330.631 179.772C332.016 179.772 333.139 178.649 333.139 177.264C333.139 175.878 332.016 174.755 330.631 174.755C329.245 174.755 328.122 175.878 328.122 177.264C328.122 178.649 329.245 179.772 330.631 179.772Z" fill="#020202"/>
+<path d="M339.489 237.453C339.489 237.453 321.342 271.748 317.945 282.526C314.548 293.304 314.862 325.065 314.862 325.065H324.739C324.739 325.065 324.739 293.017 328.932 287.621C333.126 282.226 356.499 254.685 356.499 254.685L339.489 237.453Z" fill="#473F47"/>
+<path d="M337.477 241.62C337.477 241.62 348.477 286.04 354.173 295.983C359.87 305.925 375.443 323.837 375.443 323.837L383.83 319.342C383.83 319.342 362.26 291.044 363.462 282.761C364.664 274.478 367.721 242.783 367.721 242.783C367.721 242.783 352.527 234.539 337.477 241.62Z" fill="#473F47"/>
+<path d="M374.776 177.786C374.776 177.786 383.543 182.268 380.277 193.046C377.01 203.824 366.676 228.098 367.8 235.284C368.923 242.47 367.721 242.705 367.721 242.705C367.721 242.705 344.662 251.014 337.477 241.581C337.477 241.581 351.195 193.046 354.108 186.984C357.021 180.922 365.344 174.207 374.776 177.786Z" fill="#7497F7"/>
+<path d="M370.23 201.747C369.378 204.4 368.183 206.929 366.676 209.272C365.916 210.674 365.005 211.988 363.959 213.192C360.993 216.38 356.551 217.595 352.579 219.345C351.869 219.624 351.21 220.022 350.633 220.521C350.042 221.192 349.573 221.961 349.248 222.794C347.092 227.511 344.192 232.292 339.463 234.422C341.409 226.988 343.382 219.554 345.603 212.212C345.861 210.851 346.412 209.561 347.218 208.434C348.023 207.306 349.063 206.366 350.267 205.68C355.232 202.035 360.157 198.324 365.174 [...]
+<path d="M358.472 158.843C357.975 159.352 357.335 159.875 357.335 160.58C357.419 161.111 357.64 161.611 357.975 162.03C359.491 164.643 358.106 168.302 359.935 170.666C360.617 171.475 361.528 172.058 362.548 172.338C363.585 172.479 364.589 172.802 365.513 173.292C366.214 173.982 366.613 174.922 366.624 175.905C366.729 177.081 366.519 178.257 366.624 179.433C366.598 179.827 366.673 180.221 366.842 180.578C367.011 180.934 367.269 181.242 367.591 181.471C367.915 181.613 368.268 181.68 368.62 [...]
+<path d="M358.119 163.232C358.837 162.788 361.163 163.716 362.038 163.703C364.795 163.624 367.042 165.009 369.25 163.311C371.053 162.004 371.772 159.666 372.399 157.523C372.412 157.406 372.412 157.288 372.399 157.17C372.373 157.02 372.315 156.878 372.229 156.752C371.21 155.263 369.132 155.106 367.382 154.675C364.259 153.773 361.453 152.012 359.282 149.593C358.706 149.098 358.319 148.42 358.184 147.672C358.217 147.241 358.352 146.823 358.58 146.455C358.807 146.087 359.119 145.778 359.491 [...]
+<path d="M372.738 194.705C372.738 194.705 363.306 218.966 325.862 223.604L324.556 218.378C324.556 218.378 349.562 208.488 354.957 198.455C356.508 195.635 357.848 192.705 358.968 189.688C360.667 184.985 366.114 182.451 370.478 184.894C373.065 186.344 374.672 189.218 372.738 194.705Z" fill="#7497F7"/>
+<path d="M318.219 217.294C318.262 217.957 318.54 218.582 319.003 219.058C316.603 219.953 314.065 220.422 311.504 220.443C311.038 220.388 310.568 220.52 310.198 220.809C309.701 221.344 310.093 222.219 310.55 222.781C312.496 224.976 315.187 226.373 318.102 226.701C320.001 227.07 321.969 226.75 323.654 225.799C324.817 224.927 325.798 223.835 326.542 222.585C326.693 222.394 326.808 222.177 326.881 221.945C326.937 221.486 326.826 221.022 326.568 220.639C326.267 220.077 325.849 218.966 325.261 [...]
+<path d="M390.781 324.477C390.969 324.612 391.123 324.791 391.229 324.997C391.336 325.204 391.391 325.433 391.391 325.666C391.391 325.898 391.336 326.127 391.229 326.334C391.123 326.54 390.969 326.719 390.781 326.854C386.726 331.223 381.869 334.771 376.475 337.306C374.985 337.999 372.934 338.495 371.915 337.202C370.896 335.908 371.981 333.949 372.843 332.459C374.007 330.46 374.721 328.231 374.933 325.927C374.935 325.138 375.09 324.357 375.39 323.627C376.449 321.681 381.648 319.708 383.80 [...]
+<path d="M328.005 332.093C328.108 332.303 328.158 332.534 328.151 332.767C328.144 333 328.081 333.228 327.967 333.432C327.852 333.635 327.69 333.807 327.494 333.934C327.298 334.06 327.074 334.137 326.842 334.158C321.156 335.935 315.181 336.6 309.244 336.117C307.598 335.974 305.573 335.386 305.325 333.753C305.076 332.12 306.997 330.957 308.486 330.108C310.476 328.946 312.195 327.374 313.529 325.496C313.916 324.808 314.441 324.207 315.071 323.732C316.952 322.556 322.465 323.379 324.347 324 [...]
+<path d="M82.624 320.244C82.5681 321.91 82.8757 323.568 83.5254 325.104C84.3449 326.534 85.5796 327.683 87.066 328.396C90.2505 330.055 93.9528 330.42 97.4001 329.415C97.8679 329.321 98.2884 329.067 98.589 328.697C98.7671 328.384 98.8404 328.022 98.798 327.664C98.5365 325.763 97.5715 324.029 96.0936 322.804C94.6209 321.605 93.3619 320.165 92.3702 318.545C90.7894 315.331 91.9652 306.787 85.9424 308.198C80.9125 309.335 82.4803 316.69 82.624 320.244Z" fill="#FBB9AD"/>
+<path d="M81.7878 326.005C81.7878 326.005 80.9256 328.122 81.9838 329.35C83.042 330.578 93.8727 337.306 101.163 331.884C108.453 326.463 91.2597 325.77 91.2597 325.77L81.7878 326.005Z" fill="#7497F7"/>
+<path d="M82.2059 321.119C82.5356 320.953 82.9144 320.911 83.2722 321.003C83.6301 321.094 83.9428 321.312 84.1525 321.616C84.8636 322.426 85.7692 323.042 86.784 323.405C87.7989 323.768 88.8895 323.867 89.9533 323.693C92.331 323.131 93.2717 320.387 94.4475 320.374C95.6233 320.361 101.921 325.731 102.286 328.03C102.652 330.33 99.4251 332.028 95.8716 332.25C92.318 332.472 84.244 330.003 82.7154 328.135C82.0707 327.093 81.6876 325.911 81.5989 324.69C81.5102 323.468 81.7184 322.243 82.2059 32 [...]
+<path d="M61.9687 323.523C61.8989 325.19 62.2071 326.852 62.8702 328.383C63.6897 329.81 64.9247 330.954 66.4107 331.662C69.5904 333.322 73.2889 333.687 76.7318 332.681C77.2051 332.592 77.6313 332.338 77.9337 331.963C78.1058 331.652 78.1788 331.297 78.1428 330.944C77.8788 329.043 76.9143 327.31 75.4384 326.084C73.9758 324.879 72.7183 323.445 71.715 321.838C70.1341 318.637 71.31 310.079 65.2871 311.49C60.2572 312.64 61.825 320.009 61.9687 323.523Z" fill="#FBB9AD"/>
+<path d="M61.1326 329.311C61.1326 329.311 60.2703 331.414 61.3285 332.642C62.3868 333.87 73.1913 340.598 80.4813 335.19C87.7714 329.781 70.6044 329.075 70.6044 329.075L61.1326 329.311Z" fill="#7497F7"/>
+<path d="M61.5506 324.411C61.8823 324.249 62.2613 324.211 62.6185 324.305C62.9758 324.398 63.2876 324.617 63.4973 324.921C64.2044 325.736 65.1096 326.356 66.1256 326.719C67.1415 327.083 68.2341 327.179 69.298 326.998C71.6627 326.423 72.6164 323.693 73.7792 323.68C74.9419 323.667 81.2522 329.023 81.618 331.323C81.9838 333.622 78.7568 335.32 75.2032 335.543C71.6496 335.765 63.5887 333.309 62.0602 331.44C61.4122 330.398 61.0273 329.213 60.9386 327.989C60.8498 326.764 61.0599 325.537 61.5506 [...]
+<path d="M57.6443 234.605C57.6443 234.605 56.5338 296.492 61.1064 317.134L72.7471 318.571L75.9218 233.991L57.6443 234.605Z" fill="#473F47"/>
+<path d="M89.7965 227.916C89.7965 227.916 99.0593 261.231 92.4094 314.835L80.7688 316.272L73.4395 230.816L89.7965 227.916Z" fill="#473F47"/>
+<path d="M107.212 201.251C107.081 203.498 106.363 205.431 104.416 206.084C104.249 206.14 104.079 206.184 103.906 206.215C100.34 206.934 95.6495 204.216 92.3964 201.838C91.0326 200.858 89.7241 199.802 88.477 198.677V174.729L105.905 192.523C106.809 195.343 107.25 198.29 107.212 201.251Z" fill="white"/>
+<path d="M92.527 201.734C92.527 202.858 92.6707 203.981 92.6707 205.105C92.6707 211.271 91.2467 217.647 93.0757 223.709C93.6775 224.997 93.8602 226.44 93.5983 227.837C93.0628 228.958 92.1324 229.842 90.9854 230.32C85.5374 233.298 79.2272 234.239 73.1129 235.075C68.488 235.728 61.9295 237.1 57.6574 234.605C55.8414 233.547 55.2273 231.574 54.6394 229.601C53.005 223.226 52.0417 216.697 51.7652 210.122C51.7652 209.259 51.6346 208.41 51.5954 207.509C51.2383 201.604 51.1163 195.69 51.2295 189. [...]
+<path opacity="0.1" d="M67.3252 236.708C65.5354 237.231 61.4069 235.585 60.0351 235.402C59.2121 235.258 58.4674 234.84 57.6443 234.657C53.5551 233.638 53.0717 222.141 52.6797 219.045C51.6215 210.879 49.9884 202.413 49.8708 194.222C49.6871 191.06 50.054 187.891 50.9552 184.854C51.414 183.338 52.2008 181.941 53.2596 180.762C54.3185 179.584 55.6236 178.653 57.0825 178.035C62.3084 176.153 63.8631 192.68 64.5817 196.103C65.3002 199.526 65.3917 205.588 67.6519 208.332C69.9121 211.075 74.4324 2 [...]
+<path d="M81.4612 161.547C81.0269 162.414 80.2868 163.089 79.3839 163.441C78.2826 163.69 77.2342 164.133 76.2876 164.748C75.5202 165.58 75.0315 166.63 74.8897 167.753L74.145 171.228L73.753 172.979C73.702 173.295 73.5959 173.6 73.4395 173.88C73.219 174.126 72.9461 174.32 72.6408 174.446C72.3355 174.573 72.0058 174.63 71.6758 174.612C70.2989 174.669 68.9357 174.319 67.7564 173.606C67.5501 173.516 67.3799 173.359 67.273 173.162C67.1695 172.918 67.1422 172.65 67.1946 172.391L67.6257 167.387C [...]
+<path d="M118.447 186.749C118.604 186.488 118.905 186.226 119.153 186.383C119.254 186.484 119.326 186.61 119.362 186.749C119.505 187 119.713 187.208 119.963 187.353C120.213 187.497 120.497 187.573 120.786 187.572C121.348 187.572 121.936 187.48 122.51 187.48C123.262 187.504 123.997 187.702 124.659 188.058C125.321 188.413 125.891 188.918 126.325 189.532C127.189 190.773 127.67 192.24 127.71 193.752C127.864 195.11 127.49 196.476 126.665 197.566C125.359 199.095 122.994 199.134 120.969 199.069 [...]
+<path d="M81.9838 206.215V192.367C81.9834 191.825 82.1466 191.295 82.452 190.848C82.7573 190.4 83.1906 190.055 83.6953 189.858L117.99 176.206C119.767 175.5 123.386 177.617 123.386 179.524L121.7 211.572C121.701 212.107 121.543 212.63 121.245 213.074C120.947 213.519 120.523 213.864 120.028 214.067L87.3664 229.118C85.5766 229.849 81.9315 227.733 81.9315 225.812L81.9838 206.215Z" fill="#7497F7"/>
+<path d="M81.9838 206.215V192.367C81.9712 191.824 82.128 191.291 82.4324 190.841C82.7368 190.392 83.1736 190.048 83.6822 189.858L117.99 176.206C119.767 175.5 123.386 177.617 123.386 179.524L121.7 211.572C121.7 212.106 121.54 212.629 121.243 213.073C120.945 213.517 120.522 213.863 120.028 214.067L87.3664 229.118C85.5896 229.849 81.9446 227.733 81.9446 225.812L81.9838 206.215Z" fill="url(#paint5_linear_998_3388)"/>
+<path d="M83.6953 207.025V193.177C83.6941 192.633 83.8567 192.102 84.162 191.652C84.4673 191.202 84.9011 190.855 85.4067 190.655L119.702 177.016C120.112 176.851 120.556 176.79 120.995 176.837C121.435 176.884 121.856 177.038 122.222 177.285C122.588 177.533 122.888 177.866 123.096 178.257C123.303 178.647 123.412 179.082 123.412 179.524V212.421C123.411 212.956 123.252 213.478 122.954 213.922C122.656 214.366 122.234 214.712 121.74 214.916L87.4448 229.157C87.1156 229.293 86.7625 229.364 86.40 [...]
+<path d="M83.6953 193.177L107.212 205.275L122.759 177.839C122.759 177.839 123.36 177.486 123.36 179.524V212.421L83.6953 224.754V193.177Z" fill="url(#paint6_linear_998_3388)"/>
+<path d="M75.5429 149.136C75.3034 149.499 74.994 149.81 74.6329 150.052C74.2718 150.295 73.8661 150.463 73.4395 150.547C71.114 151.043 69.703 149.92 68.5272 152.624C68.148 153.55 68.0305 154.562 68.1875 155.55C68.1875 155.759 68.9191 158.072 69.102 157.954C68.501 158.385 68.0307 157.21 67.3775 156.87C66.7242 156.53 65.7575 157.523 65.9142 158.372C66.1869 159.206 66.6734 159.954 67.3252 160.541C68.3697 161.838 68.9452 163.449 68.9583 165.114C68.9583 165.493 68.8146 166.002 68.4227 166.015 [...]
+<path d="M77.0323 164.173L76.6403 164.291C76.5228 164.303 76.4126 164.353 76.3268 164.434C76.301 164.524 76.301 164.619 76.3268 164.709C75.5594 165.54 75.0706 166.591 74.9289 167.714L74.1842 171.189C72.9267 168.967 71.9774 166.585 71.3622 164.108C73.2449 164.325 75.1451 164.347 77.0323 164.173Z" fill="#DC9F95"/>
+<path d="M79.0181 206.346C79.238 206.076 79.5212 205.864 79.8425 205.73C80.1639 205.595 80.5135 205.542 80.8602 205.575C81.254 205.773 81.6299 206.005 81.9838 206.268C82.3172 206.416 82.6771 206.496 83.042 206.503C84.5193 206.609 86.0023 206.399 87.3926 205.889C88.0942 205.547 88.8597 205.355 89.6397 205.327C90.106 205.418 90.5471 205.608 90.9327 205.886C91.3183 206.163 91.6394 206.521 91.8738 206.934C92.569 207.931 92.9601 209.109 92.9995 210.324C93.0389 211.539 92.725 212.739 92.0959 2 [...]
+<path d="M54.4826 177.604C54.4826 177.604 29.9341 209.703 37.6945 221.044C45.4549 232.384 78.195 219.175 78.195 219.175L75.0072 209.782C75.0072 209.782 52.0134 212.695 51.8436 210.122C51.6737 207.548 66.4237 192.811 66.4237 192.811C66.4237 192.811 69.0628 171.241 54.4826 177.604Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_998_3388" x1="205.602" y1="217.059" x2="225.016" y2="382.04" gradientUnits="userSpaceOnUse">
+<stop offset="0.01"/>
+<stop offset="0.08" stop-opacity="0.69"/>
+<stop offset="0.21" stop-opacity="0.32"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_998_3388" x1="224.023" y1="204.269" x2="230.817" y2="297.433" gradientUnits="userSpaceOnUse">
+<stop offset="0.01"/>
+<stop offset="0.08" stop-opacity="0.69"/>
+<stop offset="0.21" stop-opacity="0.32"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_998_3388" x1="58.5327" y1="443.156" x2="564.489" y2="8.37679" gradientUnits="userSpaceOnUse">
+<stop offset="0.01"/>
+<stop offset="0.08" stop-opacity="0.69"/>
+<stop offset="0.21" stop-opacity="0.32"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_998_3388" x1="177.761" y1="100.992" x2="254.594" y2="272.061" gradientUnits="userSpaceOnUse">
+<stop offset="0.01"/>
+<stop offset="0.08" stop-opacity="0.69"/>
+<stop offset="0.21" stop-opacity="0.32"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_998_3388" x1="322.374" y1="172.495" x2="402.892" y2="276.503" gradientUnits="userSpaceOnUse">
+<stop offset="0.01"/>
+<stop offset="0.08" stop-opacity="0.69"/>
+<stop offset="0.21" stop-opacity="0.32"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_998_3388" x1="74.9289" y1="171.711" x2="165.728" y2="273.08" gradientUnits="userSpaceOnUse">
+<stop offset="0.01"/>
+<stop offset="0.13" stop-opacity="0.69"/>
+<stop offset="0.25" stop-opacity="0.32"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_998_3388" x1="98.0664" y1="165.702" x2="111.98" y2="257.899" gradientUnits="userSpaceOnUse">
+<stop offset="0.01"/>
+<stop offset="0.13" stop-opacity="0.69"/>
+<stop offset="0.25" stop-opacity="0.32"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_998_3388">
+<rect width="440" height="384.739" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 000000000..16d797326
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,70 @@
+/** @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],
+ },
+ 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-300': '#BDCEFB',
+ 'primary-500': '#7497F7',
+ 'primary-800': '#3C5088',
+ neutral: {
+ invert: '#FFFFFF',
+ 400: '#70727F',
+ 500: '#4D4E5F',
+ 600: '#292B3F',
+ },
+ secondary: {
+ 500: "#FF8B8B",
+ }
+ },
+ fontSize: {
+ heading0: ['48px', { lineHeight: '64px' }],
+ heading1: ['32px', { lineHeight: 1.25 }],
+ heading2: ['24px', { lineHeight: 1.25 }],
+ heading3: ['20px', { lineHeight: 1.25 }],
+ heading4: ['16px', { lineHeight: 1.25 }],
+ label14: ['14px', { lineHeight: 1.43 }],
+ 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)'
+ },
+ },
+ },
+ plugins: [],
+};