From e272a45251f0cb33a11dbaf9079c8a9902d272d1 Mon Sep 17 00:00:00 2001 From: nicolelyn Date: Fri, 24 Apr 2020 14:52:30 -0400 Subject: [PATCH] add majority of components --- website/components/basic-hero/index.jsx | 41 + website/components/basic-hero/style.css | 63 + .../consul-enterprise-comparison/index.jsx | 40 + .../consul-enterprise-comparison/style.css | 0 .../enterprise-comparison/img/arrow.svg | 4 + .../img/complexity-advanced.png | Bin 0 -> 5195 bytes .../img/complexity-basic.png | Bin 0 -> 1478 bytes .../enterprise-comparison/index.jsx | 47 + .../enterprise-comparison/style.css | 92 + website/components/learn-callout/index.jsx | 57 + website/components/learn-callout/style.css | 174 ++ website/pages/home/index.jsx | 124 +- website/pages/home/style.css | 452 +---- website/pages/style.css | 4 + website/public/img/hero-pattern-mobile.svg | 319 ++++ website/public/img/hero-pattern.svg | 1688 +++++++++++++++++ 16 files changed, 2669 insertions(+), 436 deletions(-) create mode 100644 website/components/basic-hero/index.jsx create mode 100644 website/components/basic-hero/style.css create mode 100644 website/components/consul-enterprise-comparison/index.jsx create mode 100644 website/components/consul-enterprise-comparison/style.css create mode 100644 website/components/enterprise-comparison/img/arrow.svg create mode 100644 website/components/enterprise-comparison/img/complexity-advanced.png create mode 100644 website/components/enterprise-comparison/img/complexity-basic.png create mode 100644 website/components/enterprise-comparison/index.jsx create mode 100644 website/components/enterprise-comparison/style.css create mode 100644 website/components/learn-callout/index.jsx create mode 100644 website/components/learn-callout/style.css create mode 100644 website/public/img/hero-pattern-mobile.svg create mode 100644 website/public/img/hero-pattern.svg diff --git a/website/components/basic-hero/index.jsx b/website/components/basic-hero/index.jsx new file mode 100644 index 0000000000..4c48ca19ce --- /dev/null +++ b/website/components/basic-hero/index.jsx @@ -0,0 +1,41 @@ +import Button from '@hashicorp/react-button' + +export default function BasicHero({ + heading, + content, + links, + brand, + backgroundImage, +}) { + console.log('background?', backgroundImage) + return ( +
+
+

{heading}

+ {content &&

{content}

} + {links && links.length > 0 && ( +
+ {links.map((link, stableIdx) => { + const buttonVariant = stableIdx === 0 ? 'primary' : 'secondary' + const linkType = link.type || 'inbound' + return ( +
+ )} +
+
+ ) +} diff --git a/website/components/basic-hero/style.css b/website/components/basic-hero/style.css new file mode 100644 index 0000000000..247b5ec189 --- /dev/null +++ b/website/components/basic-hero/style.css @@ -0,0 +1,63 @@ +.g-basic-hero { + padding: 88px 0; + + & .g-type-display-1 { + color: var(--gray-1); + text-align: center; + margin-left: auto; + margin-right: auto; + margin-top: 0; + max-width: 14em; + } + + & .g-type-body-large { + color: var(--gray-3); + margin: 0 auto 0 auto; + text-align: center; + max-width: 40em; + } + + & .links { + display: flex; + flex-wrap: wrap; + justify-content: center; + /* + * Margins here compensate for extra 8px margin on buttons + * which are needed to center and space properly regardless of whether + * buttons are wrapping to multiple lines or not. + */ + margin-top: calc(32px - 8px); + margin-bottom: -8px; + @media (--large) { + margin-top: calc(40px - 8px); + } + + & .g-btn { + /* + * This ensures 16px between buttons at all times, while maintaining proper centering + * when buttons wrap to multiple lines. + * There will be an extra 8px space on all sides of the button group. + * The top and bottom are accounted for by the -8px adjustment on `.action` margins. + * The left and right excess is left as is - it's needed for proper centering when wrapping. + */ + margin: 8px; + } + } + + &.has-background { + background-repeat: no-repeat; + background-color: var(--gray-7); + background-image: url(/img/hero-pattern.svg); + width: 100%; + background-size: cover; + background-position: center; + + @media (max-width: 800px) { + background-image: url(/img/hero-pattern-mobile.svg); + } + + & .g-btn { + background: var(--gray-7); + } + } +} diff --git a/website/components/consul-enterprise-comparison/index.jsx b/website/components/consul-enterprise-comparison/index.jsx new file mode 100644 index 0000000000..ff705678d0 --- /dev/null +++ b/website/components/consul-enterprise-comparison/index.jsx @@ -0,0 +1,40 @@ +import EnterpriseComparison from '../enterprise-comparison' + +const technicalComplexity = { + title: 'Technical Complexity', + label: 'Open Source', + imageUrl: + 'https://www.datocms-assets.com/2885/1579883486-complexity-basic.png', + description: + 'Consul open source enables individuals to discover services and securely manage connections between them across cloud, on-premise, and hybrid environments.', + link: { + text: 'View Open Source Features', + url: 'https://www.hashicorp.com/products/consul/pricing/', + type: 'outbound', + }, +} + +const organizationalComplexity = { + title: 'Organizational Complexity', + label: 'Enterprise', + imageUrl: + 'https://www.datocms-assets.com/2885/1579883488-complexity-advanced.png', + description: + 'Consul Enterprise provides the foundation for organizations to build and govern an enterprise-ready service networking environment for multiple teams across multiple clouds', + link: { + text: 'View Enterprise Features', + url: 'https://www.hashicorp.com/products/consul/pricing/', + type: 'outbound', + }, +} + +export default function NomadEnterpriseInfo() { + return ( + + ) +} diff --git a/website/components/consul-enterprise-comparison/style.css b/website/components/consul-enterprise-comparison/style.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/website/components/enterprise-comparison/img/arrow.svg b/website/components/enterprise-comparison/img/arrow.svg new file mode 100644 index 0000000000..2dcd4406c9 --- /dev/null +++ b/website/components/enterprise-comparison/img/arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/website/components/enterprise-comparison/img/complexity-advanced.png b/website/components/enterprise-comparison/img/complexity-advanced.png new file mode 100644 index 0000000000000000000000000000000000000000..eeac1f3b967b761d4b9d8de5f6ee6fce4b749cbc GIT binary patch literal 5195 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 literal 0 HcmV?d00001 diff --git a/website/components/enterprise-comparison/img/complexity-basic.png b/website/components/enterprise-comparison/img/complexity-basic.png new file mode 100644 index 0000000000000000000000000000000000000000..9a35d60b14714f07b0030a0f6f24c547561053ef GIT binary patch literal 1478 zcmaKsdpy&77{`BWE}LA^IOI~flsc5lsq91;^I|WTp-$7>h9q5FlcQN>ER`Ig+@e(+ zb1!9S$zE02qi*y5V z8rl5peGqxjQ2Qj*QgaM&*^#V2FBaz1?`S9JIP@&c?i@9Oltf9c`i=Pc{bhYDCG51o z@$=f=)~d$G@Xn`X=GDS2OLAe+*H6}`bf9ENU;b%!Q=FnR@l6-z4Ppx!htX&ftEx^s zFwi||w7Tz0y!jwc(BboJ?{nq@Tw@?nUjJh9_$5ith_Z;!8A zw<~`Bvr<#Bg{mO+4RS{a6qjt(+ch?0@(J=*`LMSqs1et53)xjFcE}QNyLEKJE^d-; zAQnikVWLAlj`c^~_P8SogT6BG)?0(voA>5CN_-W(5+ygQog7qYy5H%XUu);`a0bFXythj|HtUPevg1oKFduZ&%(ZGlU+v8;;lHRfG$ zM7OU3PImZ6(}oja!;_8I`HsvGx%sPYIM5!IahedT24{+_USs=swfnR@sVx!`7v~-t z%%En17*-Gi7jejLv13LB%mp9ozDUY1Eaw{}Z?lK#NyT|j9&@)>6qS%2@*3#sS7YIp z`$`%Qvu#DXpSu}oiK#jAEFIraf3CaBs8oJb4dc&;JZ-N{BG_VX6k?P-t)!D14S6nC zEQC!&9sh46WtH?f0iru;j0F|#;n01m7Wh1b3Fi&E%V?;gf-PEvgT&E*=9{IaQ7xfN zY$*jBiF6&jS=kZyMC>?4B2NuicG7St5s92+ZT^u)uUJ61Dv81bbL%pq_=u8@be&m5 zs{swPL0LyrA93ccnAu-y^Ny#Edk{*nGCiyCBbmdl)ZS_)*5fVzYE)5bKXN|(gKW6~ zap_=sCALhZeeY1qhEI-SOcG=T|e^ymYP$E~R26M-dQm;6i? z(^mLNexdANEEk)Rl3A;J<|D0RJ-mG5U9n>)eqDy-Fyr^;aWI7!UfgjXM_EQY-31G5 zm(o2YhLFwm{@C&V%F>j@VOu*iR{)w6yO09D)ZKY$sRdP(3kVL>%Slb$N?lBRZBYYx zZt`(qY-WtZ9`--gnhS0Y zg+f_%adCOpW`aYq-IvEr>!LAZEK)Q@T8!iIB;o5?*{vLPaX%n#hwd6=yfd~oX^Bwf zY)qe5qfZ{6R#=#r0R7jrK56@T_KykEN*N6pRe!R#_mo0_ALIkKby^$A^I6-k?`g%kdv&qBYwh{zhMC@h5q5%P^M6b@`-;7;73gV2U%o%2 z4Hf!MSk%R7WW1BDH|L1eV_51t*#f1!W)_XnP?PIZ9ho<@p2|!h6ZJyH?LN{MBkedC zLyT*SCejX2U8Gfu=@8pA#*{+()Jphp#?X2nuU!yQZT9QlmUhn|3TiWKP@v2#q8Mui z`$?_?bvKE;3_qd@+r*&#&$P?P`Iq^o3d*3U<7p~j7l|x^oWCa;;}7PWNxxkH +
+

{title}

+ +
+
+ +
{itemOne.label}
+

{itemOne.title}

+ +

{itemOne.description}

+
+
+
+ +
+
+ +
{itemTwo.label}
+

{itemTwo.title}

+ +

{itemTwo.description}

+
+
+
+ + ) +} diff --git a/website/components/enterprise-comparison/style.css b/website/components/enterprise-comparison/style.css new file mode 100644 index 0000000000..1b4b72989d --- /dev/null +++ b/website/components/enterprise-comparison/style.css @@ -0,0 +1,92 @@ +.g-enterprise-comparison { + padding-top: 128px; + padding-bottom: 128px; + background: var(--gray-7); + + & h2 { + text-align: center; + } + + @media (max-width: 800px) { + padding-top: 64px; + padding-bottom: 64px; + } + + & .content-container { + display: flex; + justify-content: space-between; + margin: 0 auto 64px auto; + + @media (max-width: 800px) { + flex-wrap: wrap; + } + & .item { + flex-basis: 50%; + justify-content: center; + text-align: center; + margin-top: 64px; + + @media (max-width: 800px) { + margin-top: 64px; + flex-basis: 100%; + } + + & .g-type-label-strong { + margin-top: 64px; + + @media (max-width: 800px) { + margin-top: 32px; + } + } + + & h4 { + white-space: pre; + margin-top: 24px; + margin-bottom: 8px; + + @media (max-width: 800px) { + margin-top: 16px; + } + } + + & picture { + display: inline-block; + } + + & img { + max-width: 160px; + max-height: 98px; + } + & p { + margin-top: 0; + margin-bottom: 24px; + + @media (max-width: 800px) { + max-width: 600px; + margin-right: auto; + margin-left: auto; + } + } + } + + & .spacer { + & .vertical-spacer { + height: 93px; + } + + & .arrow { + display: flex; + align-items: center; + } + + @media (max-width: 800px) { + display: none; + } + } + } + + & .more-features-link { + display: flex; + justify-content: center; + } +} diff --git a/website/components/learn-callout/index.jsx b/website/components/learn-callout/index.jsx new file mode 100644 index 0000000000..c76c61d47b --- /dev/null +++ b/website/components/learn-callout/index.jsx @@ -0,0 +1,57 @@ +import Button from '@hashicorp/react-button' + +export default function LearnNomad({ headline, brand, items }) { + return ( +
+
+
+ {/* need this wrapper to flex center the .column-content */} +
+
+

{headline}

+
+
+ {items.map((item) => { + return ( + +
+
+
{item.time}
+ {item.title} +
+
+
+ +

{item.title}

+
+
+
+ + ) + })} +
+
+
+ ) +} diff --git a/website/components/learn-callout/style.css b/website/components/learn-callout/style.css new file mode 100644 index 0000000000..62be0028ce --- /dev/null +++ b/website/components/learn-callout/style.css @@ -0,0 +1,174 @@ +.g-learn-callout { + padding-top: 88px; + padding-bottom: 88px; + background-image: url(/img/nomad-panel-learn.svg); + background-size: contain; + background-position: bottom right; + background-repeat: no-repeat; + + @media (max-width: 768px) { + padding-top: 64px; + padding-bottom: 64px; + } + + & .learn-container { + @media (max-width: 1200px) { + display: flex; + flex-wrap: wrap; + justify-content: center; + } + & .mobile-button { + @media (min-width: 1201px) { + display: none; + } + } + } + + & .column-container { + display: flex; + justify-content: space-between; + margin: 0 36px; + + @media (max-width: 1200px) { + margin: 0 -16px; + flex-wrap: wrap; + } + + & .column-content { + & h2 { + @media (max-width: 1200px) { + margin: 0; + } + } + } + + & .desktop-button { + @media (max-width: 1200px) { + display: none; + } + } + + & > div { + display: flex; + flex-wrap: wrap; + align-items: center; + margin: 0 16px; + width: 33.333%; + overflow: auto; + + @media (max-width: 1200px) { + text-align: center; + display: block; + width: 100%; + margin: 0; + margin-bottom: 48px; + } + } + + & > a { + margin: 0 16px; + width: 33.333%; + transition: box-shadow 0.25s, transform 0.25s, -webkit-transform 0.25s; + + &:hover { + box-shadow: 0px 16px 28px rgba(37, 38, 45, 0.12); + transform: translateY(-4px); + } + + @media (max-width: 1200px) { + width: calc(50% - 32px); + margin-bottom: 48px; + } + + @media (max-width: 768px) { + width: 100%; + + &:last-child { + margin-bottom: 48px; + } + } + } + + & > a { + display: flex; + cursor: pointer; + } + + & > a .course { + border: 1px solid var(--gray-6); + display: flex; + flex-direction: column; + width: 100%; + + & > div { + min-height: 200px; + padding: 25px; + } + + & .image { + background: var(--gray-7); + position: relative; + display: flex; + justify-content: center; + align-items: center; + + & img { + max-width: 80px; + max-height: 80px; + } + } + + & h4 { + color: var(--gray-2); + } + + & .time { + color: var(--gray-4); + position: absolute; + top: 10px; + right: 10px; + } + + & .content { + text-align: center; + background: #fff; + @media (max-width: 768px) { + display: flex; + justify-content: center; + align-items: center; + } + + & h4 { + margin: 24px 0px; + } + } + } + } + + &.brand-consul { + & .content label { + color: var(--consul); + } + } + + /* Brand -- Nomad */ + &.brand-nomad { + & .content label { + color: var(--nomad); + } + } + + /* Brand -- Packer */ + &.brand-packer { + & .content label { + color: var(--packer); + } + } + + /* Brand -- Terraform */ + &.brand-terraform { + & .content label { + color: var(--terraform); + } + } +} diff --git a/website/pages/home/index.jsx b/website/pages/home/index.jsx index d009bbc2aa..06f4539199 100644 --- a/website/pages/home/index.jsx +++ b/website/pages/home/index.jsx @@ -1,3 +1,125 @@ +import CallToAction from '@hashicorp/react-call-to-action' +import UseCases from '@hashicorp/react-use-cases' +import BasicHero from '../../components/basic-hero' +import ConsulEnterpriseComparison from '../../components/consul-enterprise-comparison' +import LearnCallout from '../../components/learn-callout' + export default function HomePage() { - return <> + return ( +
+ +
+ +
+ + + + +
+ ) } diff --git a/website/pages/home/style.css b/website/pages/home/style.css index 3f807df920..5b620fa580 100644 --- a/website/pages/home/style.css +++ b/website/pages/home/style.css @@ -1,449 +1,31 @@ -.large-padding { - padding: 120px 0; -} - -.small-padding { - padding: 56px; -} - -.bg-light { - background: #f7f8fa !important; -} - -#companies-using-consul h2 { - margin-bottom: 24px; -} - -#static-dynamic { - & .g-section-header { - margin-bottom: 64px; - } -} - -.g-use-cases { - margin: 48px 0 8px; - - @media (min-width: 768px) { - display: flex; - justify-content: center; - margin: 0 20px; +.p-home { + & > section { + padding-top: 100px; + padding-bottom: 100px; } - & .button { - background: #ca2171; - border-radius: 1px; - box-sizing: border-box; - color: #ffffff; - display: inline-block; - font-family: 'gilmer-web', 'Gilmer', Geneva, Tahoma, Helvetica, Verdana, - sans-serif; - font-size: 0.938rem; - font-weight: 500; - line-height: 1.6em; - margin-bottom: 4px; - padding: 14px 20px; - text-decoration: none; - } + & .use-cases { + padding-top: 128px; + padding-bottom: 64px; - & img { - width: 51%; - - @media (min-width: 768px) { - width: 80%; - } - } - - & h3 { - font-weight: 600; - margin: 40px 0 0; - - & span { - display: block; - font-weight: 300; - } - } - - & p { - margin-top: 0.5em; - - @media (min-width: 768px) { - margin-top: 1em; - } - } - - & > div { - padding: 0 16px; - position: relative; - text-align: center; - - @media (min-width: 768px) { - padding: 0 20px; - width: 33.33333%; + @media (max-width: 800px) { + padding-top: 88px; } - @media (min-width: 992px) { - display: flex; - flex-direction: column; - justify-content: space-between; - } - - & + div { - margin-top: 56px; - - @media (min-width: 768px) { - margin-top: 0; - } - } - } - - & .button { - @media (min-width: 768px) { - margin-top: 22px; - } - } -} - -.g-logo-grid { - align-items: center; - display: flex; - flex-wrap: wrap; - margin: 0 auto; - max-width: 990px; - text-align: center; - - & > div { - width: 33%; - - & img { - width: 100%; - } - - @media (max-width: 768px) { - width: 50%; - } - } -} - -.g-text-asset { - text-align: center; - - @media (min-width: 768px) { - align-content: space-between; - display: flex; - justify-content: center; - margin: 0 -20px; - text-align: left; - } - - &.reverse { - flex-direction: row-reverse; - - & > div:first-child > div { - margin-left: auto; - - @media (min-width: 768px) { - padding: 0 24px 0 0; - } - - @media (min-width: 992px) { - padding-right: 32px; - } - } - } - - &.large { - margin-bottom: -56px; - - @media (min-width: 768px) { - margin-bottom: -96px; - } - - @media (min-width: 992px) { - margin-bottom: -120px; - } - - & > div:last-child { - justify-content: unset; - } - - & picture > img, - & img { - width: 145%; - vertical-align: middle; - } - } - - & > div { - @media (min-width: 768px) { - align-items: center; - margin: 0 auto; - display: flex; - padding: 0 20px; - width: 50%; - } - - &:first-child { - margin-bottom: 32px; - - @media (min-width: 768px) { - margin-bottom: 0; - } - - & > div { - @media (min-width: 768px) { - margin-left: 0; - max-width: 454px; - padding: 0 0 0 24px; - } - - @media (min-width: 992px) { - padding-left: 32px; - } - - & a { - color: #1563ff; - - &:focus, - &:hover { - color: #2c72fe; - - & path { - fill: #2c72fe; - } - } - - & svg { - margin-left: 10px; - } - } + & .g-use-cases { + & .icon { + /* min-height: 140px; */ + margin-bottom: 25px; } } - &:last-child { - justify-content: center; - } - - & img, - & picture > img { - width: 100%; - - &.shadow { - box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4); - } - } - - & > svg { - max-width: 100%; - } - - &.code-sample > div { - box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4); - color: var(--white); + & h2 { margin: 0; - text-align: left; - width: 100%; - - & span { - background: #252937; - border-bottom: 1px solid rgba(255, 255, 255, 0.15); - display: block; - height: 32px; - - @media (min-width: 768px) { - height: 40px; - } - } - - & .code { - background: #1e212a; - overflow: auto; - padding: 16px 24px 32px; - width: 100%; - - & code { - background: #1e212a; - border-radius: 0; - color: var(--white); - white-space: pre; - - &.keyword { - color: #be5580; - } - } - } - } - - &.logos { - justify-content: center; - - & > div { - align-items: center; - display: flex; - flex-direction: column; - - & img, - picture { - margin: 30px 0; - - @media (max-width: 767px) { - margin: 15px 0; - max-width: 51%; - } - } - } - } - } - - & h3 { - margin: 0 0 16px 0; - - @media (min-width: 768px) { - margin-top: 16px; - } - } - - & i { - list-style-type: none; - margin: 16px; - text-align: left; - - @media (min-width: 768px) { - margin: 16px 0; - } - - &:before { - background-position: center; - background-repeat: no-repeat; - background-size: 100%; - background-image: url('data:image/svg+xml;utf8,'); - content: ''; - display: block; - float: left; - height: 24px; - margin: 4px 0 0 -40px; - width: 24px; - } - } -} - -#static-dynamic { - & .static-callout { - width: 85%; - } - - & #index-dynamic-animation { - width: 85%; - margin: 0 auto; - - & svg { - width: 100%; - height: auto !important; - } - } -} - -.home-cta-section { - color: var(--white); - - @media (min-width: 768px) { - display: flex; - } - - & > div { - display: flex; - justify-content: center; - padding: 64px 24px; - overflow: hidden; - - @media (min-width: 768px) { - padding-top: 80px; - padding-bottom: 80px; - width: 50%; - } - - @media (min-width: 992px) { - padding-top: 96px; - padding-bottom: 96px; - width: 50%; - } - - & > svg { - width: 135px; - } - - &:first-child { - background: var(--consul); - position: relative; - - &:after { - content: ''; - background: url('/img/consul-connect/mesh.svg') top center; - background-size: cover; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - opacity: 0.2; - transform: scale(1.3, 1.3); - } - } - - &:last-child { - background: var(--gray-1); - } - - & > div { - display: flex; - flex-direction: column; - max-width: 564px; text-align: center; - width: 100%; - z-index: 1; - - & div:first-child { - height: 50px; - width: auto; - } - - & p { - flex: 1 0 auto; - margin: 24px 0 32px; + margin-bottom: 64px; + @media (max-width: 800px) { + margin-bottom: 48px; } } } } - -.button { - background: #ca2171; - border-radius: 1px; - box-sizing: border-box; - color: #ffffff; - display: inline-block; - font-family: 'gilmer-web', 'Gilmer', Geneva, Tahoma, Helvetica, Verdana, - sans-serif; - font-size: 0.938rem; - font-weight: 500; - line-height: 1.6em; - margin-bottom: 4px; - padding: 14px 20px; - text-decoration: none; -} - -.button.white { - background: #ffffff; - color: #000000; -} - -.button.secondary.white { - border: 1px solid rgba(255, 255, 255, 0.24); - color: #ffffff; -} - -.button.secondary { - background: transparent; - border: 1px solid rgba(29, 30, 35, 0.2); - color: #000000; - padding: 13px 19px; -} -/* */ diff --git a/website/pages/style.css b/website/pages/style.css index 277d5537c6..c39b4276da 100644 --- a/website/pages/style.css +++ b/website/pages/style.css @@ -37,11 +37,15 @@ @import '~@hashicorp/react-tabs/dist/style.css'; @import '~@hashicorp/react-code-block/dist/style.css'; @import '~@hashicorp/react-alert-banner/dist/style.css'; +@import '~@hashicorp/react-use-cases/dist/style.css'; /* Local Components */ +@import '../components/basic-hero/style.css'; +@import '../components/enterprise-comparison/style.css'; @import '../components/footer/style.css'; @import '../components/before-after/style.css'; @import '../components/tabs/style.css'; +@import '../components/learn-callout/style.css'; /* Local Pages */ @import './downloads/style.css'; diff --git a/website/public/img/hero-pattern-mobile.svg b/website/public/img/hero-pattern-mobile.svg new file mode 100644 index 0000000000..b9c3153aad --- /dev/null +++ b/website/public/img/hero-pattern-mobile.svg @@ -0,0 +1,319 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/public/img/hero-pattern.svg b/website/public/img/hero-pattern.svg new file mode 100644 index 0000000000..372b243204 --- /dev/null +++ b/website/public/img/hero-pattern.svg @@ -0,0 +1,1688 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +