diff --git a/website/components/branded-cta/branded-cta.module.css b/website/components/branded-cta/branded-cta.module.css index 8a5a56de1..2ef985706 100644 --- a/website/components/branded-cta/branded-cta.module.css +++ b/website/components/branded-cta/branded-cta.module.css @@ -1,20 +1,16 @@ .brandedCta { padding: 88px 0; + background-image: url('/img/cta-bg.svg'); background-color: var(--boundary-secondary); - background-image: url('./img/bg-pattern.svg'); - background-position: bottom right; + background-position: bottom right -350px; background-repeat: no-repeat; - @media (--small) { - background-position: bottom 0 right -130px; + @media (--medium-up) { + background-position: bottom right -250px; } - @media (438px <= width < 600px) { - background-position: bottom 0 right -260px; - } - - @media (width < 438px) { - background-position: bottom 0 right -170px; + @media (--large) { + background-position: bottom right -150px; } } diff --git a/website/components/branded-cta/img/bg-pattern.svg b/website/components/branded-cta/img/bg-pattern.svg deleted file mode 100644 index ba1b8d186..000000000 --- a/website/components/branded-cta/img/bg-pattern.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/website/components/branded-cta/index.jsx b/website/components/branded-cta/index.jsx index 45153a47e..1d4318072 100644 --- a/website/components/branded-cta/index.jsx +++ b/website/components/branded-cta/index.jsx @@ -34,6 +34,7 @@ export default function BrandedCta({ heading, content, links }) { }} title={link.text} url={link.url} + icon={link.icon} /> ) })} diff --git a/website/components/homepage-hero/HomepageHero.module.css b/website/components/homepage-hero/HomepageHero.module.css index 1ff791961..9cc49d3e6 100644 --- a/website/components/homepage-hero/HomepageHero.module.css +++ b/website/components/homepage-hero/HomepageHero.module.css @@ -3,11 +3,11 @@ background-repeat: no-repeat; background-color: var(--boundary-secondary); background-image: url(/img/hero-pattern.svg); - background-position: bottom right; + background-position: bottom -50px right -100px; @media (max-width: 767px) { padding: 88px 0; - background-position: bottom 0 right -130px; + background-position: bottom -130px right -130px; } & :global(.g-hero) { diff --git a/website/components/how-boundary-works/index.jsx b/website/components/how-boundary-works/index.jsx new file mode 100644 index 000000000..8286c7f0a --- /dev/null +++ b/website/components/how-boundary-works/index.jsx @@ -0,0 +1,28 @@ +import s from './style.module.css' + +export default function HowBoundaryWorks({ heading, description, items, img }) { + return ( +
+
+
+

{heading}

+

{description}

+
    + {items.map((item, index) => { + // Index is stable + // eslint-disable-next-line react/no-array-index-key + return ( +
  • + {item} +
    • + ) + })} +
+
+
+ {img.alt} +
+
+
+ ) +} diff --git a/website/components/how-boundary-works/style.module.css b/website/components/how-boundary-works/style.module.css new file mode 100644 index 000000000..76d3e2c15 --- /dev/null +++ b/website/components/how-boundary-works/style.module.css @@ -0,0 +1,70 @@ +.root { + composes: g-grid-container from global; +} + +.inner { + --columns: 1; + + display: grid; + grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); + grid-gap: 48px 32px; + padding: 48px 32px; + background-color: var(--white); + box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08); + border-radius: 1px; + + @media (--medium-up) { + --columns: 2; + + padding: 100px 75px; + } +} + +.heading { + margin: 0; + composes: g-type-display-3 from global; +} + +.description { + margin: 32px 0 0; + composes: g-type-body-small from global; +} + +.items { + list-style: none; + margin: 15px 0 0; + padding: 0; +} + +.item { + position: relative; + display: flex; + align-items: center; + padding-top: 24px; + padding-bottom: 24px; + color: var(--gray-2); + composes: g-type-display-5 from global; + + &::before { + content: ''; + flex-shrink: 0; + display: block; + margin-right: 20px; + width: 8px; + height: 8px; + border-radius: 9999px; + background-color: #c4c4c4; + } + + & + .item { + border-top: 2px solid var(--gray-6); + } +} + +.media { + align-self: center; + justify-self: center; + & img { + max-width: 100%; + } +} diff --git a/website/components/how-it-works/feature/feature.module.css b/website/components/how-it-works/feature/feature.module.css index a3edf3dd7..b841a38b1 100644 --- a/website/components/how-it-works/feature/feature.module.css +++ b/website/components/how-it-works/feature/feature.module.css @@ -6,4 +6,9 @@ & > p { margin-bottom: 32px; } + + & a { + color: inherit; + text-decoration: underline; + } } diff --git a/website/components/how-it-works/feature/index.jsx b/website/components/how-it-works/feature/index.jsx index 43b0d195d..79e621c5e 100644 --- a/website/components/how-it-works/feature/index.jsx +++ b/website/components/how-it-works/feature/index.jsx @@ -18,7 +18,7 @@ export default function Feature({ return (
-

{title}

+

{title}

{description}

{logos ? : null}
diff --git a/website/components/how-it-works/feature/logo-list/index.jsx b/website/components/how-it-works/feature/logo-list/index.jsx index 5d354906c..2e2d284c6 100644 --- a/website/components/how-it-works/feature/logo-list/index.jsx +++ b/website/components/how-it-works/feature/logo-list/index.jsx @@ -9,14 +9,10 @@ export default function LogoList({ logos }) { // eslint-disable-next-line react/no-array-index-key key={stableIdx} > - {logo.alt} + {logo.alt} ))} - -

- Integrations coming soon -

) } diff --git a/website/components/how-it-works/how-boundary-works-diagram/how-boundary-works-diagram.module.css b/website/components/how-it-works/how-boundary-works-diagram/how-boundary-works-diagram.module.css index b621dd0ff..3cfa91d9e 100644 --- a/website/components/how-it-works/how-boundary-works-diagram/how-boundary-works-diagram.module.css +++ b/website/components/how-it-works/how-boundary-works-diagram/how-boundary-works-diagram.module.css @@ -1,190 +1,32 @@ .root { - --transition-time: 0.7s; + display: grid; @media (--medium-up) { position: sticky; top: calc(50vh - (249px)); } + & > * { + grid-area: 1 / 1; + opacity: 0; + transition: opacity ease-in 0.5s; + + &:last-child { + opacity: 1; + } + } + + @media (--medium-up) { + & > *:last-child { + opacity: 0; + } + + & > *.active { + opacity: 1; + } + } + & > svg { width: 100%; } - - & .boundaryLetter, - & .spacer, - & .iconBg { - fill: var(--white); - } - - & .iconLines, - & .iconBg { - stroke-linecap: round; - stroke-width: 1.5px; - stroke-linejoin: round; - } - - & .boundaryFill, - & .arrowHead { - fill: var(--boundary, #ec585d); - } - - & .arrowHead, - & .arrowSegment, - & .spacer { - transition: var(--transition-time) ease; - transition-property: opacity; - } - - & .arrowSegment { - stroke-width: 2px; - stroke: var(--boundary, #ec585d); - stroke-miterlimit: 10; - stroke-linecap: round; - fill: none; - } - - & .dropShadow { - opacity: 0.08; - mix-blend-mode: multiply; - } - - & .iconLines { - stroke: var(--white); - fill: none; - transition: var(--transition-time) ease; - transition-property: stroke; - } - - & .subtitle { - fill: #b6b8c3; - } - - & .iconBg { - stroke: #e5e6ec; - stroke-width: 1px; - transition: var(--transition-time) ease; - transition-property: fill, stroke; - } - - & .authenticate { - & .iconBg { - fill: var(--white); - } - - & .iconLines { - stroke: #e5e6ec; - stroke-width: 1px; - } - } - - & .authorize { - & .spacer { - opacity: 0; - } - - & .iconBg { - fill: var(--black); - stroke: var(--black); - } - - & .iconLines { - stroke: #e5e6ec; - } - } - - & .access { - & .spacer { - opacity: 0; - } - - & .iconBg { - fill: var(--black); - stroke: var(--black); - } - - & .vaultIcon { - fill: var(--white); - } - } - - & .hostsAndServices { - opacity: 1; - transform: translate(0, 0); - transition: var(--transition-time) ease; - transition-property: opacity, transform; - - & .leadingLine { - fill: none; - stroke-linecap: round; - stroke-miterlimit: 10; - stroke-width: 1.5px; - stroke: var(--black); - } - } - - & .arrowOne .arrowHead, - & .arrowTwo .arrowHead { - @media (--small) { - opacity: 0; - } - } - - & .inactive { - & .arrowHead, - & .arrowSegment, - & .spacer { - @media (--medium-up) { - opacity: 0; - } - } - - &.authorize { - & .spacer { - @media (--medium-up) { - opacity: 1; - } - } - - & .iconBg { - @media (--medium-up) { - fill: var(--white); - stroke: #e5e6ec; - } - } - - & .iconLines { - @media (--medium-up) { - stroke: #b6b8c3; - } - } - } - - &.access { - & .spacer { - @media (--medium-up) { - opacity: 1; - } - } - - & .iconBg { - @media (--medium-up) { - fill: var(--white); - stroke: var(--white); - } - } - - & .vaultIcon { - @media (--medium-up) { - fill: var(--black); - } - } - } - - &.hostsAndServices { - @media (--medium-up) { - opacity: 0; - transform: translate(0, 10px); - } - } - } } diff --git a/website/components/how-it-works/how-boundary-works-diagram/index.jsx b/website/components/how-it-works/how-boundary-works-diagram/index.jsx index c33faf3e2..04ead2f35 100644 --- a/website/components/how-it-works/how-boundary-works-diagram/index.jsx +++ b/website/components/how-it-works/how-boundary-works-diagram/index.jsx @@ -3,291 +3,442 @@ import classnames from 'classnames' export default function HowBoundaryWorksDiagram({ activeExampleIndex }) { return ( -
- - - - +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + - {/* Hosts & Services */} - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - {/* Top-right arrow segment, always active */} - - - {/* Arrow (Example 1) */} - - - - - - - {/* Arrow (Example 2) */} - - - - - - - - {/* Arrow (Example 3) */} - - - - - - - - {/* Boundary logo */} - - - - - - - - {/* Users */} - - - - - - - - - - {/* Authenticate */} - - - - - - - - - - - - - - {/* Authorize */} - - - - - - - - - - - {/* Access */} - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
) diff --git a/website/components/how-it-works/how-it-works.module.css b/website/components/how-it-works/how-it-works.module.css index 77dfc1a9c..89a190f4f 100644 --- a/website/components/how-it-works/how-it-works.module.css +++ b/website/components/how-it-works/how-it-works.module.css @@ -1,60 +1,89 @@ .root { - padding: 88px 0; + composes: g-grid-container from global; + padding-top: 88px; + padding-bottom: 88px; - & .headerWrapper { - & h2 { - text-align: center; - margin-top: 0; - margin-bottom: 32px; - @media (--small) { - margin-bottom: 0; - } - } + @media (--medium-up) { + padding-top: 160px; + padding-bottom: 160px; + } +} - & p { - max-width: 818px; - text-align: center; - margin-left: auto; - margin-right: auto; - color: var(--gray-2); - } +.intro { + --columns: 1; + + padding-top: 88px; + padding-bottom: 88px; + border-top: 1px solid var(--gray-6); + display: grid; + column-gap: 32px; + grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); + row-gap: 32px; + + @media (--medium-up) { + --columns: 12; + + padding-top: 140px; + padding-bottom: 140px; + } +} + +.introTitle { + margin: 0; + grid-column: 1 / -1; + composes: g-type-display-2 from global; + + @media (--medium-up) { + grid-column: 1 / 6; + } +} + +.introDescription { + grid-column: 1 / -1; + composes: g-type-body-large from global; + + @media (--medium-up) { + grid-column: 7 / -1; + } + + & :first-child { + margin-top: 0; + } + + & :last-child { + margin-bottom: 0; } } .contentContainer { - display: flex; - justify-content: space-between; + --columns: 1; + position: relative; + display: grid; + grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); + grid-gap: 32px; - @media (--small) { - flex-direction: column; - } - - & > ul { - max-width: 470px; - margin-left: 128px; - padding: 0; - - @media (width < 1120px) { - margin-left: 64px; - } - - @media (width < 1024px) { - margin-left: 40px; - } - - @media (--small) { - margin-left: 0; - } + @media (--medium-up) { + --columns: 12; } } .diagram { - width: 591px; - max-width: 100%; + grid-column: 1 / -1; + + @media (--medium-up) { + grid-column: 1 / 6; + } } .features { + padding: 0; + grid-column: 1 / -1; + + @media (--medium-up) { + grid-column: 7 / -1; + } + & > li { list-style: none; diff --git a/website/components/how-it-works/index.jsx b/website/components/how-it-works/index.jsx index 8ca3c736b..6bddfa0ed 100644 --- a/website/components/how-it-works/index.jsx +++ b/website/components/how-it-works/index.jsx @@ -1,5 +1,4 @@ import s from './how-it-works.module.css' -import classNames from 'classnames' import HowBoundaryWorksDiagram from './how-boundary-works-diagram' import Feature from './feature' import { useState } from 'react' @@ -12,11 +11,11 @@ export default function HowItWorks({ title, description, features }) { return (
-
-

{title}

-

{description}

+
+

{title}

+
{description}
-
+
diff --git a/website/components/why-boundary/index.jsx b/website/components/why-boundary/index.jsx new file mode 100644 index 000000000..68856c364 --- /dev/null +++ b/website/components/why-boundary/index.jsx @@ -0,0 +1,22 @@ +import s from './style.module.css' + +export default function WhyBoundary({ heading, items }) { + return ( +
+

{heading}

+
    + {items.map((item, index) => { + return ( + // Index is stable + // eslint-disable-next-line react/no-array-index-key +
  • + {item.heading} +

    {item.heading}

    +

    {item.description}

    +
    • + ) + })} +
+
+ ) +} diff --git a/website/components/why-boundary/style.module.css b/website/components/why-boundary/style.module.css new file mode 100644 index 000000000..06be9dcb4 --- /dev/null +++ b/website/components/why-boundary/style.module.css @@ -0,0 +1,33 @@ +.root { + composes: g-grid-container from global; +} + +.heading { + margin: 0; + composes: g-type-display-2 from global; +} + +.items { + --columns: 1; + + list-style: none; + padding: 0; + margin: 90px 0 0; + display: grid; + grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); + grid-gap: 48px 32px; + + @media (--medium-up) { + --columns: 3; + } +} + +.itemHeading { + margin: 38px 0 0; + composes: g-type-display-4 from global; +} + +.itemDescription { + margin: 12px 0 0; + composes: g-type-body from global; +} diff --git a/website/pages/_document.js b/website/pages/_document.js index c96c2d8ff..9f061de14 100644 --- a/website/pages/_document.js +++ b/website/pages/_document.js @@ -9,7 +9,7 @@ export default class MyDocument extends Document { render() { return ( - + diff --git a/website/pages/home/img/how-boundary-works.svg b/website/pages/home/img/how-boundary-works.svg new file mode 100644 index 000000000..39a1539d0 --- /dev/null +++ b/website/pages/home/img/how-boundary-works.svg @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/website/pages/home/img/icons/activity.svg b/website/pages/home/img/icons/activity.svg new file mode 100644 index 000000000..c55b7ef36 --- /dev/null +++ b/website/pages/home/img/icons/activity.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/website/pages/home/img/icons/code-white.svg b/website/pages/home/img/icons/code-white.svg new file mode 100644 index 000000000..d487e25ff --- /dev/null +++ b/website/pages/home/img/icons/code-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/website/pages/home/img/features/config-as-code.svg b/website/pages/home/img/icons/config-as-code.svg similarity index 100% rename from website/pages/home/img/features/config-as-code.svg rename to website/pages/home/img/icons/config-as-code.svg diff --git a/website/pages/home/img/features/identity-based-access.svg b/website/pages/home/img/icons/identity-based-access.svg similarity index 100% rename from website/pages/home/img/features/identity-based-access.svg rename to website/pages/home/img/icons/identity-based-access.svg diff --git a/website/pages/home/img/icons/layers-white.svg b/website/pages/home/img/icons/layers-white.svg new file mode 100644 index 000000000..a358a32d1 --- /dev/null +++ b/website/pages/home/img/icons/layers-white.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/website/pages/home/img/icons/layers.svg b/website/pages/home/img/icons/layers.svg new file mode 100644 index 000000000..b63c1eab4 --- /dev/null +++ b/website/pages/home/img/icons/layers.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/website/pages/home/img/icons/lock.svg b/website/pages/home/img/icons/lock.svg new file mode 100644 index 000000000..9c8aec7af --- /dev/null +++ b/website/pages/home/img/icons/lock.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/website/pages/home/img/features/managing-dynamic-environments.svg b/website/pages/home/img/icons/managing-dynamic-environments.svg similarity index 100% rename from website/pages/home/img/features/managing-dynamic-environments.svg rename to website/pages/home/img/icons/managing-dynamic-environments.svg diff --git a/website/pages/home/img/features/platform-agnosticity.svg b/website/pages/home/img/icons/platform-agnosticity.svg similarity index 100% rename from website/pages/home/img/features/platform-agnosticity.svg rename to website/pages/home/img/icons/platform-agnosticity.svg diff --git a/website/pages/home/img/icons/refresh-white.svg b/website/pages/home/img/icons/refresh-white.svg new file mode 100644 index 000000000..11c0ef427 --- /dev/null +++ b/website/pages/home/img/icons/refresh-white.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/website/pages/home/img/features/session-management.svg b/website/pages/home/img/icons/session-management.svg similarity index 100% rename from website/pages/home/img/features/session-management.svg rename to website/pages/home/img/icons/session-management.svg diff --git a/website/pages/home/img/features/session-visibility.svg b/website/pages/home/img/icons/session-visibility.svg similarity index 100% rename from website/pages/home/img/features/session-visibility.svg rename to website/pages/home/img/icons/session-visibility.svg diff --git a/website/pages/home/img/icons/star.svg b/website/pages/home/img/icons/star.svg new file mode 100644 index 000000000..131b23c0f --- /dev/null +++ b/website/pages/home/img/icons/star.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/website/pages/home/img/icons/terminal.svg b/website/pages/home/img/icons/terminal.svg new file mode 100644 index 000000000..4e096dc5b --- /dev/null +++ b/website/pages/home/img/icons/terminal.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/website/pages/home/img/icons/user.svg b/website/pages/home/img/icons/user.svg new file mode 100644 index 000000000..77adbbb1d --- /dev/null +++ b/website/pages/home/img/icons/user.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/website/pages/home/img/logos/custom.svg b/website/pages/home/img/logos/custom.svg new file mode 100644 index 000000000..ba422144c --- /dev/null +++ b/website/pages/home/img/logos/custom.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/website/pages/home/img/logos/github-black.svg b/website/pages/home/img/logos/github-black.svg new file mode 100644 index 000000000..ae48cb8c8 --- /dev/null +++ b/website/pages/home/img/logos/github-black.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/website/pages/home/img/logos/mongo-db.svg b/website/pages/home/img/logos/mongo-db.svg new file mode 100644 index 000000000..c86870e4e --- /dev/null +++ b/website/pages/home/img/logos/mongo-db.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/website/pages/home/img/logos/my-sql-color.svg b/website/pages/home/img/logos/my-sql-color.svg new file mode 100644 index 000000000..af973e341 --- /dev/null +++ b/website/pages/home/img/logos/my-sql-color.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/website/pages/home/img/logos/postgresql.png b/website/pages/home/img/logos/postgresql.png new file mode 100644 index 000000000..21fc2eafa Binary files /dev/null and b/website/pages/home/img/logos/postgresql.png differ diff --git a/website/pages/home/img/logos/ssh.svg b/website/pages/home/img/logos/ssh.svg new file mode 100644 index 000000000..227757b47 --- /dev/null +++ b/website/pages/home/img/logos/ssh.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/website/pages/home/img/logos/unknown.svg b/website/pages/home/img/logos/unknown.svg new file mode 100644 index 000000000..a76989238 --- /dev/null +++ b/website/pages/home/img/logos/unknown.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/website/pages/home/img/red-usecase-accessprivileges.png b/website/pages/home/img/red-usecase-accessprivileges.png deleted file mode 100644 index 511292dfe..000000000 Binary files a/website/pages/home/img/red-usecase-accessprivileges.png and /dev/null differ diff --git a/website/pages/home/img/red-usecase-compliancewithoutoverhead.png b/website/pages/home/img/red-usecase-compliancewithoutoverhead.png new file mode 100644 index 000000000..c96c53bc6 Binary files /dev/null and b/website/pages/home/img/red-usecase-compliancewithoutoverhead.png differ diff --git a/website/pages/home/img/red-usecase-integratedsystem.png b/website/pages/home/img/red-usecase-integratedsystem.png new file mode 100644 index 000000000..a46b4c62e Binary files /dev/null and b/website/pages/home/img/red-usecase-integratedsystem.png differ diff --git a/website/pages/home/img/red-usecase-sessionvisibility.png b/website/pages/home/img/red-usecase-sessionvisibility.png deleted file mode 100644 index a0cba5f6f..000000000 Binary files a/website/pages/home/img/red-usecase-sessionvisibility.png and /dev/null differ diff --git a/website/pages/home/index.jsx b/website/pages/home/index.jsx index 5c0b5ff5c..e65e42e2e 100644 --- a/website/pages/home/index.jsx +++ b/website/pages/home/index.jsx @@ -1,7 +1,8 @@ import BrandedCta from 'components/branded-cta' import HomepageHero from 'components/homepage-hero' import HowItWorks from 'components/how-it-works' -import SectionBreakCta from 'components/section-break-cta' +import HowBoundaryWorks from 'components/how-boundary-works' +import WhyBoundary from 'components/why-boundary' import ProductFeaturesList from '@hashicorp/react-product-features-list' import UseCases from '@hashicorp/react-use-cases' @@ -44,21 +45,33 @@ export default function HomePage() { /> +

+ In the shift to the cloud, organizations need secure access to + targets beyond their own perimeter. +

+

+ Boundary provides a secure way to access hosts and critical + systems without having to manage credentials or expose your + network, and is entirely open source. +

+ + } features={[ { - title: 'Authenticate', + title: 'Authenticate & authorize', description: - 'Authenticate with any trusted identity provider you are already using. No need to distribute new credentials and manage them.', + 'Authenticate with any trusted identity provider you are already using and authorize access based on granular, logical roles and services.', logos: [ { alt: 'GitHub', - url: require('./img/logos/github-gray.svg?url'), + url: require('./img/logos/github-black.svg?url'), }, { alt: 'AWS', - url: require('./img/logos/aws-gray.svg?url'), + url: require('./img/logos/aws-color.svg?url'), }, { alt: 'Microsoft Azure', @@ -78,14 +91,14 @@ export default function HomePage() { }, { alt: 'More integrations', - url: require('./img/logos/more-gray.svg?url'), + url: require('./img/logos/custom.svg?url'), }, ], }, { - title: 'Authorize', + title: 'Connect', description: - 'Authorize access based on logical roles and services, instead of physical IP addresses. Manage dynamic infrastructure and integrate service registries so hosts and service catalogs are kept up-to-date.', + 'Manage dynamic infrastructure and integrate service registries so hosts and service catalogs are kept up-to-date.', logos: [ { alt: 'Consul', @@ -112,78 +125,102 @@ export default function HomePage() { url: require('./img/logos/kubernetes-color.svg?url'), }, { - url: require('./img/logos/more-gray.svg?url'), alt: 'More integrations', + url: require('./img/logos/custom.svg?url'), }, ], }, { title: 'Access', - description: - 'Automate credential injection to securely access services and hosts with HashiCorp Vault. Reduce risk of leaking credentials with dynamic secrets and just-in-time credentials.', + description: ( + <> + Reduce risk of leaking credentials with dynamic secrets and + just-in-time credentials. Automate credential injection to + securely access services and hosts with{' '} + + HashiCorp Vault + + . + + ), + logos: [ + { + alt: 'Postgresql', + url: require('./img/logos/postgresql.png?url'), + width: 36, + }, + { + alt: 'SSH', + url: require('./img/logos/ssh.svg?url'), + width: 42, + }, + { + alt: 'Mongo DB', + url: require('./img/logos/mongo-db.svg?url'), + }, + { + alt: 'AWS', + url: require('./img/logos/aws-color.svg?url'), + }, + { + alt: 'Unknown', + url: require('./img/logos/unknown.svg?url'), + }, + { + alt: 'MySQL', + url: require('./img/logos/my-sql-color.svg?url'), + }, + { + alt: 'More integrations', + url: require('./img/logos/custom.svg?url'), + }, + ], }, ]} /> -
-
-

Use cases

- -
-
+
+ +
-
- + -
+
+
+
+

Use cases

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/website/public/img/hero-pattern.svg b/website/public/img/hero-pattern.svg index 2fadb6b29..0f266be7b 100644 --- a/website/public/img/hero-pattern.svg +++ b/website/public/img/hero-pattern.svg @@ -1 +1,56 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +