Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WIP: New landing page design / content #152

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

WIP: New landing page design / content #152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion website/docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ module.exports = {
],
},
footer: {
style: 'dark',
// style: 'dark',
links: [
{
title: 'Docs',
Expand Down
355 changes: 355 additions & 0 deletions website/src/components/graphs/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,355 @@
import React from 'react';
import clsx from 'clsx';

export const LineChartPositive = props => {
return (
<svg
width="336"
height="178"
viewBox="0 0 336 178"
fill="none"
xmlns="http://www.w3.org/2000/svg"
style={props.style}
>
<g clip-path="url(#clip0_4_2)">
<mask
id="mask0_4_2"
style={{ maskType: 'luminance' }}
maskUnits="userSpaceOnUse"
x="-4"
y="-2"
width="344"
height="182"
>
<path
d="M339.055 -1.48334H-3.05455V179.483H339.055V-1.48334Z"
fill="white"
/>
</mask>
<g mask="url(#mask0_4_2)">
<path
d="M0 178V142.4C19.6 142.4 36.4 83.0667 56 83.0667C75.6 83.0667 92.4 106.8 112 106.8C131.6 106.8 148.4 47.4667 168 47.4667C187.6 47.4667 204.4 94.9333 224 94.9333C243.6 94.9333 260.4 23.7333 280 23.7333C299.6 23.7333 316.4 47.4667 336 47.4667C336 47.4667 336 47.4667 336 178"
fill="url(#paint0_linear_4_2)"
/>
</g>
<mask
id="mask1_4_2"
style={{ maskType: 'luminance' }}
maskUnits="userSpaceOnUse"
x="-4"
y="-2"
width="344"
height="182"
>
<path
d="M339.055 -1.48334H-3.05455V179.483H339.055V-1.48334Z"
fill="white"
/>
</mask>
<g mask="url(#mask1_4_2)">
<path
d="M0 142.4C19.6 142.4 36.4 83.0667 56 83.0667C75.6 83.0667 92.4 106.8 112 106.8C131.6 106.8 148.4 47.4667 168 47.4667C187.6 47.4667 204.4 94.9333 224 94.9333C243.6 94.9333 260.4 23.7333 280 23.7333C299.6 23.7333 316.4 47.4667 336 47.4667"
stroke="#28C76F"
stroke-width="2"
/>
</g>
</g>
<defs>
<linearGradient
id="paint0_linear_4_2"
x1="0"
y1="23.7333"
x2="0"
y2="178"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#28C76F" stop-opacity="0.36" />
<stop offset="1" stop-color="#D4F4E2" stop-opacity="0.01" />
</linearGradient>
<clipPath id="clip0_4_2">
<rect width="336" height="178" fill="white" />
</clipPath>
</defs>
</svg>
);
};

export const LineChartNegative = props => {
return (
<svg
width="336"
height="178"
viewBox="0 0 336 178"
fill="none"
xmlns="http://www.w3.org/2000/svg"
style={{
...props.style,
}}
>
<g clip-path="url(#clip0_4_47)">
<mask
id="mask0_4_47"
style={{ maskType: 'luminance' }}
maskUnits="userSpaceOnUse"
x="-4"
y="-2"
width="344"
height="182"
>
<path
d="M-3.0545 -1.48334H339.055V179.483H-3.0545V-1.48334Z"
fill="white"
/>
</mask>
<g mask="url(#mask0_4_47)">
<path
d="M336 178V142.4C316.4 142.4 299.6 83.0667 280 83.0667C260.4 83.0667 243.6 106.8 224 106.8C204.4 106.8 187.6 47.4667 168 47.4667C148.4 47.4667 131.6 75 112 75C92.4 75 75.6 23.7333 56 23.7333C36.4 23.7333 19.6 47.4667 0 47.4667C0 47.4667 0 47.4667 0 178"
fill="url(#paint0_linear_4_47)"
/>
</g>
<mask
id="mask1_4_47"
style={{ maskType: 'luminance' }}
maskUnits="userSpaceOnUse"
x="-4"
y="-2"
width="344"
height="182"
>
<path
d="M-3.0545 -1.48334H339.055V179.483H-3.0545V-1.48334Z"
fill="white"
/>
</mask>
<g mask="url(#mask1_4_47)">
<path
d="M336 142.4C316.4 142.4 299.6 83.0667 280 83.0667C260.4 83.0667 243.6 106.8 224 106.8C204.4 106.8 187.6 47.4667 168 47.4667C148.4 47.4667 131.6 75 112 75C92.4 75 75.6 23.7333 56 23.7333C36.4 23.7333 19.6 47.4667 0 47.4667"
stroke="#C72828"
stroke-width="2"
/>
</g>
</g>
<defs>
<linearGradient
id="paint0_linear_4_47"
x1="336"
y1="23.7333"
x2="336"
y2="178"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#C72828" stop-opacity="0.36" />
<stop offset="1" stop-color="#D4F4E2" stop-opacity="0.01" />
</linearGradient>
<clipPath id="clip0_4_47">
<rect width="336" height="178" fill="white" />
</clipPath>
</defs>
</svg>
);
};

export const LineChart = props => {
return (
<svg
width="272"
height="107"
viewBox="0 0 272 107"
fill="none"
xmlns="http://www.w3.org/2000/svg"
style={props.style}
>
<g opacity="0.16" clip-path="url(#clip0_3461_7588)">
<path
d="M23.9784 25.2438L8 11.7483V107H567.243V31.1481L551.264 20.0625L535.286 48.7645L519.308 45.0773L503.329 66.5737L487.351 58.1391L471.373 83.5636L455.394 69.6343L439.416 94.9625L423.437 73.0323L407.459 80.6235L391.481 37.8958L375.502 31.3168L359.524 46.3305L343.546 51.3913L327.567 24.4003L311.589 37.8958L295.611 44.4026L279.632 33.6785L263.654 66.5737L247.675 56.4521L231.697 80.9127L215.719 44.6436L199.74 71.6346L183.762 92.7213L167.784 52.2348L151.805 59.826L135.827 34.5219L119.849 44.6436L103.87 21.8699L87.8918 56.4521L71.9135 75.0084L55.9351 36.2089L39.9567 46.3305L23.9784 25.2438Z"
fill="#9F7DE1"
/>
</g>
<g clip-path="url(#clip1_3461_7588)">
<path
d="M8 11.7483L23.9784 25.2438L39.9567 46.3305L55.9351 36.2089L71.9135 75.0084L87.8918 56.4521L103.87 21.8699L119.849 44.6436L135.827 34.5219L151.805 59.826L167.784 52.2348L183.762 92.7213L199.74 71.6346L215.719 44.6436L231.697 80.9127L247.675 56.4521L263.654 66.5737L279.632 33.6785L295.611 44.4026L311.589 37.8958L327.567 24.4003L343.546 51.3913L359.524 46.3305L375.502 31.3168L391.481 37.8958L407.459 80.6235L423.437 73.0323L439.416 94.9625L455.394 69.6343L471.373 83.5636L487.351 58.1391L503.329 66.5737L519.308 45.0773L535.286 48.7645L551.264 20.0625L567.243 31.1481"
stroke="#9F7DE1"
stroke-width="0.665765"
/>
</g>
<rect
x="20.9824"
y="22.0643"
width="5.99189"
height="5.99189"
rx="2.99594"
fill="#9F7DE1"
stroke="#2E2E33"
stroke-width="0.665765"
/>
<rect
x="36.9608"
y="43.13"
width="5.99189"
height="5.99189"
rx="2.99594"
fill="#9F7DE1"
stroke="#2E2E33"
stroke-width="0.665765"
/>
<rect
x="52.9392"
y="33.0988"
width="5.99189"
height="5.99189"
rx="2.99594"
fill="#9F7DE1"
stroke="#2E2E33"
stroke-width="0.665765"
/>
<rect
x="68.9175"
y="71.8861"
width="5.99189"
height="5.99189"
rx="2.99594"
fill="#9F7DE1"
stroke="#2E2E33"
stroke-width="0.665765"
/>
<rect
x="5.00403"
y="8.35486"
width="5.99189"
height="5.99189"
rx="2.99594"
fill="#9F7DE1"
stroke="#2E2E33"
stroke-width="0.665765"
/>
<rect
x="100.874"
y="18.7206"
width="5.99189"
height="5.99189"
rx="2.99594"
fill="#9F7DE1"
stroke="#2E2E33"
stroke-width="0.665765"
/>
<rect
x="116.853"
y="41.7924"
width="5.99189"
height="5.99189"
rx="2.99594"
fill="#9F7DE1"
stroke="#2E2E33"
stroke-width="0.665765"
/>
<rect
x="132.831"
y="31.7611"
width="5.99189"
height="5.99189"
rx="2.99594"
fill="#9F7DE1"
stroke="#2E2E33"
stroke-width="0.665765"
/>
<rect
x="148.809"
y="56.8392"
width="5.99189"
height="5.99189"
rx="2.99594"
fill="#9F7DE1"
stroke="#2E2E33"
stroke-width="0.665765"
/>
<rect
x="84.8959"
y="53.4955"
width="5.99189"
height="5.99189"
rx="2.99594"
fill="#9F7DE1"
stroke="#2E2E33"
stroke-width="0.665765"
/>
<rect
x="180.766"
y="89.608"
width="5.99189"
height="5.99189"
rx="2.99594"
fill="#9F7DE1"
stroke="#2E2E33"
stroke-width="0.665765"
/>
<rect
x="196.744"
y="68.5424"
width="5.99189"
height="5.99189"
rx="2.99594"
fill="#9F7DE1"
stroke="#2E2E33"
stroke-width="0.665765"
/>
<rect
x="212.723"
y="41.7924"
width="5.99189"
height="5.99189"
rx="2.99594"
fill="#9F7DE1"
stroke="#2E2E33"
stroke-width="0.665765"
/>
<rect
x="228.701"
y="77.9049"
width="5.99189"
height="5.99189"
rx="2.99594"
fill="#9F7DE1"
stroke="#2E2E33"
stroke-width="0.665765"
/>
<rect
x="244.68"
y="53.4955"
width="5.99189"
height="5.99189"
rx="2.99594"
fill="#9F7DE1"
stroke="#2E2E33"
stroke-width="0.665765"
/>
<rect
x="164.788"
y="49.483"
width="5.99189"
height="5.99189"
rx="2.99594"
fill="#9F7DE1"
stroke="#2E2E33"
stroke-width="0.665765"
/>
<defs>
<clipPath id="clip0_3461_7588">
<rect
width="240"
height="95.2516"
fill="white"
transform="translate(8 11.7483)"
/>
</clipPath>
<clipPath id="clip1_3461_7588">
<rect
width="240"
height="83.2142"
fill="white"
transform="translate(8 11.7483)"
/>
</clipPath>
</defs>
</svg>
);
};
17 changes: 17 additions & 0 deletions website/src/components/marquee/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from 'react';
import clsx from 'clsx';

import styles from './styles.module.css';

const Marquee = props => {
return (
<div className={clsx(styles.marquee)}>
<div className={clsx(styles.marqueeInner)}>{props.children}</div>
<div className={clsx(styles.marqueeInner)} aria-hidden="true">
{props.children}
</div>
</div>
);
};

export default Marquee;
Loading